/* style.css – spoločný štýl celého webu (hlavná stránka, predmety, návody)
   Stavia na Bootstrap 5.3; tu sú len farby, písmo a vlastné komponenty. */

/* ---------- 1. Farby a písmo ---------- */
:root,
[data-bs-theme="light"] {
  --paper:      #eceef1;   /* pozadie */
  --surface:    #f5f6f8;   /* plochy nad pozadím */
  --ink:        #2a3342;   /* text */
  --ink-soft:   #5a6576;   /* vedľajší text */
  --line:       #d3d8df;   /* linky */
  --accent:     #a3274f;   /* malinová – jediný akcent */
  --accent-bg:  #f3e1e8;   /* jemný malinový podklad */

  --bs-body-bg: var(--paper);
  --bs-body-color: var(--ink);
  --bs-border-color: var(--line);
  --bs-link-color: var(--accent);
  --bs-link-color-rgb: 163, 39, 79;
  --bs-link-hover-color: #8a1a3e;
  --bs-link-hover-color-rgb: 138, 26, 62;
}

[data-bs-theme="dark"] {
  --paper:      #1f242c;
  --surface:    #272d37;
  --ink:        #c6ccd5;
  --ink-soft:   #98a2b0;
  --line:       #363e4a;
  --accent:     #e58aa6;
  --accent-bg:  #2e242a;

  --bs-body-bg: var(--paper);
  --bs-body-color: var(--ink);
  --bs-border-color: var(--line);
  --bs-link-color: var(--accent);
  --bs-link-color-rgb: 229, 138, 166;
  --bs-link-hover-color: #f0a8bd;
  --bs-link-hover-color-rgb: 240, 168, 189;
}

:root {
  --font-text: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Source Serif 4", Georgia, "Times New Roman", serif;
  --bs-body-font-family: var(--font-text);
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.6;
}

/* ---------- 2. Jazyk: zobrazí sa len zvolená verzia ---------- */
html[data-lang="sk"] .l-en,
html[data-lang="en"] .l-sk { display: none !important; }

/* ---------- 3. Základ ---------- */
h1, h2, h3, .serif { font-family: var(--font-head); font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); line-height: 1.08; }
h2 { font-size: clamp(1.5rem, 3vw, 1.95rem); line-height: 1.2; }
h3 { font-size: 1.3rem; line-height: 1.25; }
p  { max-width: 68ch; }
.soft { color: var(--ink-soft); }

.page { max-width: 1040px; }
section { padding-block: clamp(2.5rem, 6vw, 4.5rem); border-top: 1px solid var(--line); }
section.first { border-top: 0; }

a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 2000; background: var(--surface); padding: .5rem 1rem; }

/* ---------- 4. Navigácia (Bootstrap navbar) ---------- */
.site-nav {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-nav .navbar-brand { font-family: var(--font-head); font-weight: 600; font-size: 1.2rem; color: var(--ink); }
.site-nav .nav-link { color: var(--ink); font-weight: 500; padding-inline: .9rem !important; }
.site-nav .nav-link:hover,
.site-nav .nav-link.active { color: var(--accent); }

.switches { display: flex; align-items: center; gap: .75rem; }
.lang-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.lang-switch button {
  border: 0; background: transparent; color: var(--ink-soft);
  font: 600 .8rem/1 var(--font-text); padding: .45rem .7rem; cursor: pointer;
}
.lang-switch button[aria-pressed="true"] { background: var(--line); color: var(--ink); }
.theme-btn {
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  display: inline-grid; place-items: center; cursor: pointer;
}
.theme-btn:hover { border-color: var(--accent); color: var(--accent); }
.theme-btn .moon { display: inline; } .theme-btn .sun { display: none; }
[data-bs-theme="dark"] .theme-btn .moon { display: none; }
[data-bs-theme="dark"] .theme-btn .sun  { display: inline; }

/* ---------- 5. Úvod ---------- */
.intro { display: grid; gap: 2.5rem; align-items: end; grid-template-columns: 1fr; }
.intro .lede { font-size: 1.2rem; color: var(--ink-soft); margin-top: 1.25rem; }
.portrait { margin: 0; max-width: 260px; }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; display: block; }
@media (min-width: 768px) { .intro.has-photo { grid-template-columns: 1fr 260px; } }

.notes { display: grid; gap: 1.5rem 3rem; margin-top: 2.75rem; }
.notes p { margin: 0; font-size: 1rem; }
.notes strong { display: block; font-family: var(--font-head); font-size: 1.1rem; margin-bottom: .2rem; }
@media (min-width: 768px) { .notes { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 6. Zoznam predmetov ---------- */
.term { margin-top: 2.5rem; }
.term-name { font: 600 1rem var(--font-text); color: var(--ink-soft); margin: 0 0 .25rem; }
.courses { list-style: none; margin: 0; padding: 0; }
.courses li { border-top: 1px solid var(--line); }
.courses li:last-child { border-bottom: 1px solid var(--line); }

.course {
  display: grid; gap: .25rem 2rem; grid-template-columns: 1fr;
  padding: 1.35rem 0 1.35rem 1.1rem;
  color: inherit; text-decoration: none;
  border-left: 3px solid transparent;
}
.course .title { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.35rem, 2.6vw, 1.7rem); line-height: 1.2; }
.course .desc  { color: var(--ink-soft); font-size: 1rem; max-width: 60ch; }
.course .who   { color: var(--ink-soft); font-size: .95rem; }
.course:hover, .course:focus-visible { border-left-color: var(--accent); background: var(--accent-bg); }
.course:hover .title { color: var(--accent); }
@media (min-width: 768px) {
  .course { grid-template-columns: 1fr 15rem; align-items: baseline; }
  .course .who { grid-column: 2; grid-row: 1 / span 2; text-align: right; padding-right: 1.1rem; }
}

/* predmety, ktoré bežia práve teraz – jediné miesto s trvalým akcentom */
.term.now .course { border-left-color: var(--accent); }

.term.archive .course .title { font-size: 1.25rem; }

/* ---------- 7. Konzultácie ---------- */
.consult { display: grid; gap: 2rem 4rem; }
.consult .when { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.15; margin: .5rem 0 0; }
.consult .when small { display: block; font: 400 1rem var(--font-text); color: var(--ink-soft); margin-top: .5rem; }
.consult address { font-style: normal; margin: 0; color: var(--ink-soft); font-size: 1rem; }
.mail { font-weight: 600; font-size: 1.1rem; word-break: break-word; }
@media (min-width: 768px) { .consult { grid-template-columns: 5fr 6fr; } }

.nowrap { white-space: nowrap; }
.smile { width: 1.15em; height: 1.15em; vertical-align: -0.2em; color: var(--accent); }

/* ---------- 8. Pätička ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: 2rem 3rem; color: var(--ink-soft); font-size: .95rem; }

/* ---------- 9. Pohyb ---------- */
.course, .theme-btn, .lang-switch button { transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

[data-bs-theme="dark"] .navbar-toggler-icon { opacity: .75; }