/* cyberdocs.eu -- shared stylesheet for every generated page.
 *
 * The palette and the component shapes are lifted from seojavito.hu so the two
 * products read as one house: navy #0e1836 for text, blue #2e43d9 as the
 * primary, pink #ff5c9c for calls to action, purple #9a46c8 only as the middle
 * stop of the headline gradient.
 *
 * ALIGNMENT RULE (owner's instruction, 2026-08-07): headings, the brand block
 * and the calls to action are CENTRED; running prose is NOT. Long lines set
 * centred are hard to read because every line starts in a different place and
 * the eye loses the left edge. On this site most of the body IS long prose
 * (regulation text), so the centring is applied to specific elements, never to
 * a container that would inherit down into paragraphs and lists.
 *
 * One stylesheet for all six templates instead of six inline <style> blocks:
 * the old copies had already drifted apart (the home page styled cards, the
 * type page styled tag pills, neither knew about the other).
 */

:root {
  --bg: #f8fafc; --panel: #fff; --panel2: #f1f5fb; --line: #e3e9f2; --line2: #cfd8e6;
  --text: #0e1836; --dim: #5b6780;
  --navy: #0e1836; --blue: #2e43d9; --blue-soft: #edf0ff; --pink: #ff5c9c; --purple: #9a46c8;
  --cta: #ff5c9c; --cta2: #ea51a6; --cta-ink: #fff;
  --warn: #b45309; --warn-soft: #fff8e1;
  --shadow: 0 10px 30px -12px rgba(14, 24, 54, .18);
}

/* Dark theme keeps the same three brand colours and only flips the ground.
 * The blue has to lighten or it disappears against the navy background. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #070b18; --panel: #0e1526; --panel2: #141b2e; --line: #202a44; --line2: #2c3a5c;
    --text: #eaf0fb; --dim: #9aa8c4;
    --navy: #eaf0fb; --blue: #7c8cff; --blue-soft: #16204a; --pink: #ff6ba6; --purple: #c07ae0;
    --cta: #ff5c9c; --cta2: #ea51a6; --cta-ink: #fff;
    --warn: #e0a63c; --warn-soft: #241d0d;
    --shadow: 0 10px 30px -12px rgba(0, 0, 0, .55);
  }
}

* { box-sizing: border-box }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

main { max-width: 880px; margin: 0 auto; padding: 8px 20px 80px }

/* ---------- Brand block ----------
 * Text-based mark on purpose, same reasoning as on seojavito.hu: a 40x40 SVG
 * stays sharp at every size, costs no request, and cannot produce the mangled
 * letterforms that image generation puts into logos.
 * The shield-and-check reads as "conformity", which is what this site sells. */
header.brand {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 30px 20px 6px;
}
header.brand a.home { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit }
.mark { flex: 0 0 auto }
.brandtext .name { font-size: 1.35rem; font-weight: 900; letter-spacing: -.015em; line-height: 1.1 }
.brandtext .name .tld { color: var(--dim); font-weight: 600 }
.brandtext .slogan { color: var(--dim); font-size: .9rem; line-height: 1.3 }

/* Language switch under the brand. The hreflang tags in <head> tell crawlers
 * the translations exist; without a visible link a READER on /en/ has no way
 * to reach /hu/ at all. */
nav.langs {
  display: flex; justify-content: center; align-items: center; gap: 6px;
  padding: 12px 20px 0; font-size: .86rem;
}
/* The SELECTED language is the filled pill and the other is the plain link,
 * not the other way round. The first version dimmed the current language and
 * painted the other one bright blue, which reads backwards: the bright item
 * looks selected and the dim one looks disabled, so the switch appears not to
 * work even when it does. (Owner report, 2026-08-07.) */
nav.langs a {
  padding: 5px 14px; border-radius: 999px; text-decoration: none;
  font-weight: 600; color: var(--blue); border: 1px solid transparent;
}
nav.langs a:hover { background: var(--blue-soft); border-color: var(--blue) }
nav.langs a[aria-current="page"] {
  background: var(--blue); color: #fff; border-color: var(--blue);
  font-weight: 800; cursor: default;
}

/* ---------- Headings ---------- */
h1 {
  font-size: clamp(1.75rem, 4.6vw, 2.6rem); line-height: 1.12; font-weight: 900;
  letter-spacing: -.03em; color: var(--navy);
  margin: 26px auto 16px; max-width: 26ch; text-align: center;
}
h1 .grad {
  background: linear-gradient(100deg, var(--blue) 0%, var(--purple) 52%, var(--pink) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
h2 { font-size: 1.3rem; font-weight: 800; letter-spacing: -.015em; margin: 44px 0 12px; text-align: center }
h3 { font-size: 1.05rem; font-weight: 800; margin: 0 0 .4rem }

/* Prose stays left. See the alignment rule at the top of this file. */
p, ul, ol, dl, table { text-align: left }
p { margin: 0 0 14px }
ul, ol { padding-left: 1.35rem }
li { margin-bottom: .35rem }
a { color: var(--blue) }

/* Short intro line directly under h1 -- this one IS centred because it is one
 * or two sentences, not a paragraph of regulation text. */
.lead { color: var(--dim); font-size: 1.1rem; max-width: 60ch; margin: 0 auto 26px; text-align: center }
.lead b { color: var(--navy); font-weight: 700 }

.badge-pill {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 4px;
  padding: 8px 17px; border: 1.5px solid var(--blue); border-radius: 999px;
  background: var(--blue-soft); color: var(--blue);
  font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.center { text-align: center }

code {
  background: var(--panel2); border: 1px solid var(--line);
  padding: .05rem .3rem; border-radius: 5px; font-size: .92em;
}

/* ---------- Cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px }
a.card {
  display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px; text-decoration: none; color: inherit; box-shadow: var(--shadow);
  transition: border-color .15s, transform .15s;
}
a.card:hover { border-color: var(--blue); transform: translateY(-2px) }
a.card h3 { color: var(--blue) }
a.card p { margin: 0; font-size: .93rem; color: var(--dim) }

/* ---------- Tag pills (importance classes on a product-type page) ---------- */
.tags { text-align: center }
.tags a {
  display: inline-block; margin: .25rem .2rem 0 0;
  background: var(--blue-soft); border: 1px solid var(--blue); border-radius: 999px;
  padding: .32rem .8rem; text-decoration: none; color: var(--blue);
  font-size: .88rem; font-weight: 600;
}
.tags a:hover { background: var(--blue); color: #fff }

/* ---------- Panels ---------- */
.classbox {
  background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--blue);
  border-radius: 12px; padding: 14px 18px; box-shadow: var(--shadow);
}
.provisional {
  background: var(--warn-soft); border: 1px solid var(--line); border-left: 4px solid var(--warn);
  border-radius: 12px; padding: 14px 18px; margin: 18px 0;
}
.legal-note {
  color: var(--dim); font-size: .9rem;
  border-top: 1px solid var(--line); padding-top: .9rem; margin-top: 1.8rem;
}

/* ---------- Subscribe ---------- */
.subscribe {
  margin-top: 48px; padding: 26px 22px; text-align: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow);
}
.subscribe h3 { font-size: 1.2rem; margin: 0 0 8px }
.subscribe p { color: var(--dim); max-width: 56ch; margin: 0 auto 18px; text-align: center }
.subscribe form { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 520px; margin: 0 auto }
.subscribe input[type=email] {
  flex: 1 1 240px; min-width: 0; padding: 14px 16px; font-size: 1rem; color: var(--text);
  background: var(--bg); border: 2px solid var(--line); border-radius: 12px; text-align: center;
}
.subscribe input[type=email]:focus { outline: none; border-color: var(--blue) }
.subscribe button {
  padding: 14px 26px; font-size: 1rem; font-weight: 800; color: var(--cta-ink);
  background: linear-gradient(135deg, var(--cta), var(--cta2));
  border: 0; border-radius: 14px; cursor: pointer; box-shadow: 0 8px 24px -8px var(--cta);
}
.subscribe button:hover { filter: brightness(1.07) }

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--line); margin-top: 56px; padding: 22px 20px 40px;
  color: var(--dim); font-size: .85rem;
}
/* `footer p` and not `footer`: the `p { text-align: left }` prose rule above
 * applies directly to the paragraph, so an inherited centring on the footer
 * element loses to it. Same trap as the .subscribe paragraphs. */
footer p { text-align: center; margin: 0 }
footer a { color: var(--blue) }

@media (max-width: 620px) {
  header.brand { gap: 10px; padding-top: 22px }
  .brandtext .name { font-size: 1.2rem }
  main { padding-bottom: 56px }
}