/* Borsodweb – hírek tartalmának stílusa (a Ballare Hírszerkesztő v1.4 tartalomstílusának átültetése, admin v1.1).
   Ezt használja a Hírszerkesztő (szerkesztő és előnézet) és a nyilvános honlap is (index.php tölti be): a hír szövege
   egy .np-content osztályú elemben van. Arculat: csm37 / csm65 betűtípus, sötétszürke szöveg, narancs kiemelőszín.
   A töréspontok a honlapéval egyeznek: tablet 1024 px, mobil 767 px.
   A honlap stíluslapja minden elemre (*) beállít betűtípust, méretet és színt, ezért a tartalmon belül ezeket öröklésre állítjuk. */

@font-face { font-family: "csm37"; src: url('/design/font/S-Core - Core Sans M 37 Cn Light.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: "csm65"; src: url('/design/font/S-Core - Core Sans M 65 Bold.ttf') format('truetype'); font-weight: normal; font-style: normal; }

.np-content {
  font-family: "csm37", Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: #434a51;
  overflow-wrap: anywhere;
  word-break: normal;
  text-align: left;
}
.np-content::after { content: ""; display: block; clear: both; }
.np-content *, .np-content *::before, .np-content *::after { box-sizing: border-box; }
.np-content * { font-family: inherit; font-size: inherit; color: inherit; }   /* a honlap "* { … }" szabálya ellen */
.np-content > :first-child { margin-top: 0; }
.page-title + .np-content { padding-top: 6px; }   /* ha a cím a tartalom fölött áll (előnézet, később a nyilvános oldal) */

/* --- szövegstílusok ------------------------------------------------------------------------------------------------------- */
.np-content p { margin: 0 0 1em; padding: 0; font-size: 1em; line-height: 1.65; }
.np-content p.np-small { font-size: 14px; line-height: 1.55; color: var(--grey, #737b82); }
.np-content p.np-lead { font-size: 20px; line-height: 1.55; }
.np-content h2, .np-content h3, .np-content h4 { margin: 1.4em 0 .5em; padding: 0; clear: both; font-weight: 400; font-family: "csm65", Arial, Helvetica, sans-serif; }
.np-content h2 { font-size: 30px; line-height: 1.2; color: #ce5e29; }
.np-content h3 { font-size: 23px; line-height: 1.25; color: #434a51; }
.np-content h4 { font-size: 19px; line-height: 1.3; color: #434a51; }
.np-content strong, .np-content b, .np-content th { font-family: "csm65", Arial, Helvetica, sans-serif; font-weight: normal; }
.np-content em { font-style: italic; }
.np-content u { text-decoration: underline; text-underline-offset: 2px; }
.np-content sup, .np-content sub { font-size: .75em; line-height: 0; }
.np-content a { color: #ce5e29; text-decoration: underline; text-underline-offset: 2px; }
.np-content a:hover, .np-content a:focus-visible { color: #2b3035; }

/* színpaletta (csak az arculati színek) */
.np-content .c-accent { color: #ce5e29; }
.np-content .c-warn { color: #b3261e; }
.np-content .c-muted { color: var(--grey, #737b82); }

/* igazítás és behúzás (osztályokkal, nem beágyazott stílussal) */
.np-content .ta-center { text-align: center; }
.np-content .ta-right { text-align: right; }
.np-content .ta-justify { text-align: justify; hyphens: auto; }
.np-content .ind-1 { margin-left: 2em; }
.np-content .ind-2 { margin-left: 4em; }
.np-content .ind-3 { margin-left: 6em; }

/* --- listák --------------------------------------------------------------------------------------------------------------- */
.np-content ul, .np-content ol { margin: 0 0 1em; padding: 0 0 0 1.5em; }
.np-content ul { list-style: disc; }
.np-content ol { list-style: decimal; }
.np-content ul ul { list-style: circle; }
.np-content li { margin: .25em 0; padding: 0; font-size: 1em; line-height: 1.6; }
.np-content li > ul, .np-content li > ol { margin: .25em 0 0; }

/* --- idézet, elválasztó, információs dobozok -------------------------------------------------------------------------------- */
.np-content blockquote { margin: 1.2em 0; padding: .3em 1.1em; border-left: 4px solid var(--purple, #ce5e29); font-style: italic; color: var(--brown, #434a51); }
.np-content blockquote p:last-child { margin-bottom: 0; }
.np-content hr { height: 0; margin: 1.6em 0; border: 0; border-top: 1px solid #d5d9dc; clear: both; }
.np-content .np-box { margin: 1.3em 0; padding: 14px 18px; border: 1px solid; border-radius: 10px; clear: both; }
.np-content .np-box > :first-child { margin-top: 0; }
.np-content .np-box > :last-child { margin-bottom: 0; }
.np-content .np-box-info { background: #fbefe8; border-color: #efc8b2; }
.np-content .np-box-warn { background: #fff4d9; border-color: #ecd3a3; color: #5e4200; }
.np-content .np-box-hl { background: #f4f5f6; border-color: #d5d9dc; border-left: 6px solid var(--purple, #ce5e29); }

/* --- képek ---------------------------------------------------------------------------------------------------------------- */
.np-content figure.np-fig { margin: 1.2em auto; padding: 0; max-width: 100%; }
.np-content figure.np-fig picture { display: block; }
.np-content figure.np-fig a { display: block; }
.np-content figure.np-fig img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 6px; }
.np-content figure.np-fig figcaption { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--grey, #737b82); text-align: left; }
.np-content .np-s { width: 30%; }
.np-content .np-m { width: 45%; }
.np-content .np-l { width: 65%; }
.np-content .np-full { width: 100%; }
/* a "figure" a választóban azért kell, hogy ezek a szabályok erősebbek legyenek a figure.np-fig alap-margójánál (különben a lebegő képnek nem lenne margója, és a szöveg a képhez érne) */
.np-content figure.np-center { float: none; margin-left: auto; margin-right: auto; }
.np-content figure.np-left { float: left; margin: .35em 1.6em .9em 0; }
.np-content figure.np-right { float: right; margin: .35em 0 .9em 1.6em; }

/* kép középen, a szöveg két oszlopban körbefutja. A CSS-ben nincs olyan eszköz, amellyel egy szövegsor a kép két oldalán is folytatódhatna (a lebegő elem csak bal vagy jobb szélre tehető),
   ezért a kép két szövegoszlop között áll: a hozzá tartozó szöveg előbb a bal, majd a jobb oldali oszlopban folyik, mint az újságokban. */
.np-content div.np-mid { --np-w: 40%; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) var(--np-w) minmax(0, 1fr); margin: 1.2em 0; clear: both; }
.np-content div.np-mid.np-s { --np-w: 30%; }
.np-content div.np-mid.np-l { --np-w: 50%; }
.np-content div.np-mid > figure.np-fig { grid-column: 2; grid-row: 1; align-self: start; width: auto; margin: 0; float: none; z-index: 1; }
.np-content div.np-mid > .np-mid-text { grid-column: 1 / -1; grid-row: 1; column-count: 2; column-gap: calc(var(--np-w) + 3.2em); }
/* a kép melletti két oszlopban a behúzás nem érvényesül: a két oszlop szövege egyformán kezdődjön, különben a kép nem látszik középen (a mentett híreknél is) */
.np-content .np-mid-text > p, .np-content .np-mid-text > h2, .np-content .np-mid-text > h3, .np-content .np-mid-text > h4, .np-content .np-mid-text > blockquote { margin-left: 0; }
.np-content .np-mid-text > :first-child { margin-top: 0; }
.np-content .np-mid-text > :last-child { margin-bottom: 0; }

/* --- táblázat és videó ------------------------------------------------------------------------------------------------------ */
.np-content .np-table-wrap { margin: 1.2em 0; overflow-x: auto; -webkit-overflow-scrolling: touch; clear: both; }
.np-content table.np-table { width: 100%; min-width: 360px; border-collapse: collapse; font-size: .95em; }
.np-content table.np-table th, .np-content table.np-table td { padding: 8px 10px; border: 1px solid #d5d9dc; text-align: left; vertical-align: top; line-height: 1.5; }
.np-content table.np-table th { background: #f1f2f3; font-weight: 700; }
.np-content .np-video { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 1.3em 0; background: #2b3035; clear: both; overflow: hidden; border-radius: 6px; }
.np-content .np-video__ph { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; padding: 12px; color: #fff; font-size: 15px; line-height: 1.4; text-align: center; }
.np-content .np-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* --- reszponzív viselkedés -------------------------------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* tableten és keskenyebb helyen a két szűk oszlop nem olvasható: a kép külön sorba kerül, a szöveg alatta folyik */
  .np-content div.np-mid { display: block; }
  .np-content div.np-mid > figure.np-fig { width: 65%; margin: 1.2em auto; }
  .np-content div.np-mid > .np-mid-text { column-count: 1; }
  .np-content h2 { font-size: 29px; }
  .np-content h3 { font-size: 23px; }
  .np-content p.np-lead { font-size: 19px; }
}
@media (max-width: 767px) {
  .np-content { font-size: 16px; }
  .np-content p.np-small { font-size: 13px; }
  .np-content p.np-lead { font-size: 18px; }
  .np-content h2 { font-size: 26px; }
  .np-content h3 { font-size: 21px; }
  .np-content h4 { font-size: 17px; }
  .np-content .ind-1 { margin-left: 1em; }
  .np-content .ind-2 { margin-left: 2em; }
  .np-content .ind-3 { margin-left: 3em; }
  /* a kép körüli szövegfolyatás megszűnik: a kép külön sorba kerül, teljes szélességben */
  .np-content figure.np-fig, .np-content div.np-mid > figure.np-fig { float: none !important; width: 100% !important; margin: 1em 0 !important; }
  .np-content .np-box { padding: 12px 14px; }
}