@charset "UTF-8";
/*!
* Start Bootstrap - Clean Blog v6.0.9
* Upraveno pro web Prožít knihu
*/

/*================================================================
1. PROMĚNNÉ A BAREVNÁ PALETA
================================================================*/

:root {
  --color-primary: #d2691e;    /* podzimní oranžová */
  --color-secondary: #8b4513;  /* tmavší hnědá */
  --color-accent: #6c5c5c;     /* jemná hnědošedá */
  --color-dark: #3a2f2f;
  --color-light: #f8f5f1;
  --color-white: #ffffff;
}

/*================================================================
2. ZÁKLADNÍ TYPOGRAFIE
================================================================*/
/*Nastavení základního písma pro celý web*/
body {
  font-family: "Lora", serif;
  background-color: var(--color-light);
  color: var(--color-dark);
  line-height: 1.7;
}

/*Mezera mezi odstavci*/
p {
  margin-bottom: 1.2rem;
}

/*Nadpisy - úprava písma*/
h1, h2, h3, h4, h5 {
  font-family: "Mulish", sans-serif;
  color: var(--color-accent);
}

/* Logo */
.navbar-brand {
  font-family: "Mulish", sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* část <section> na stránce Texty */
section {
  background-color: var(--color-white);
  border-left: 6px solid var(--color-primary);
  padding: 2rem 2.5rem;
  margin: 3rem 0;
  border-radius: 15px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  line-height: 1.75;

}

section p {
  font-size: 1.05rem;
  text-align: justify;
  margin-bottom: 1.5rem;
  color: var(--color-dark);
}

section p:last-child {
  margin-bottom: 0;
}

/*================================================================
3. NAVIGACE
================================================================*/

#mainNav {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10;  /* umístění nahoře*/
  background-color: transparent;
  padding: 1rem 0;
}

/*Název webu*/
#mainNav .navbar-brand {
  margin-right: 2rem;
  color: #fff;
}

/*Odkazy v menu*/
#mainNav .nav-link {
  font-family: "Mulish", sans-serif;
  font-weight: 600;
  color: #fff;
}

/*Barva odkazu při hoveru*/
#mainNav .nav-link:hover {
  color: var(--color-primary);
}

/* Hamburger menu */
#mainNav .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

/*Urušení modrého rámečku po kliknutí*/
#mainNav .navbar-toggler:focus {
  box-shadow: none;
}

/*================================================================
4. HERO / HEADER
================================================================*/

header.masthead {
  position: relative;
  height: 100vh; /*výška celé obrazovky*/
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/*Překryvná vrstva (overlay)*/
header.masthead::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: transparent;
}

/*Obsah - musí být na overlay*/
header.masthead .container {
  position: relative;
  z-index: 1;
}

/* Hero - světlé nadpisy */
.hero-light h1 {
  font-size: 3rem;
  color: var(--color-light);
}

.hero-light::before {
  background-color: rgba(0, 0, 0, 0.35);
}

.subheading-light {
  font-size: 1.3rem;
  color: var(--color-light);
}

/*Hero - tmavé nadpisy */
.hero-dark h1 {
  font-size: 3rem;
  color: var(--color-primary);
}

.hero-dark::before {
  background-color: rgba(255, 255, 255, 0.35);
}

.subheading-dark {
  font-size: 1.3rem;
  color: var(--color-primary);
}

/* Menší hero pro rubriky */
.masthead.blog-header {
  height: 50vh;
}

/*================================================================
5. LAYOUT STRÁNKY
================================================================*/

main {
  padding: 3rem 0;
}

/*================================================================
6. KARTY (INDEX, BLOG, PROJEKTY)
================================================================*/
/* Karty - náhledy článků (projektů)*/
.card {
  border: none;
  border-radius: 15px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/*Efekt při najetí*/
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.card-img-top {
  height: 200px;
  object-fit: cover;
}

.card-title {
  font-family: "Mulish", sans-serif;
  font-weight: 700;
}

/*Text v kartě*/
.card-body {
  text-align: center;
}

.card-body .card-text {
  font-size: 0.85rem;
  color: var(--color-accent);
}

.card-body .card-excerpt {
  text-align: justify;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  hyphens: auto;
}

/*================================================================
7. TLAČÍTKA
================================================================*/

.btn-primary,
.btn-autumn {
  background-color: var(--color-primary);
  color: #fff;
  border: none;
  font-weight: 600;
  padding: 0.6rem 1.4rem;
  border-radius: 0.6rem;
  transition: all 0.25s ease;
}

.btn-primary:hover,
.btn-autumn:hover {
  background-color: var(--color-secondary);
  transform: translateY(-2px);
}

.btn-sm-autumn {
  padding: 0.4rem 1rem;
  font-size: 0.85rem;
}

/*================================================================
8. BLOG – VÝPISY
================================================================*/

.blog-categories .btn {
  border-radius: 30px;
  background-color: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
}

.blog-categories .btn:hover {
  background-color: var(--color-primary);
  color: #fff;
}

.post-preview {
  margin-bottom: 2.5rem;
}

.post-preview h2 {
  font-size: 1.8rem;
}

.post-preview h3 {
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--color-accent);
}

/*================================================================
9. ČLÁNKY – DETAIL
================================================================*/

/* Hlavička článku */
.post-header {
  text-align: center;
  margin-bottom: 3rem;
}

.post-title {
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.post-subtitle {
  font-size: 1.3rem;
  color: var(--color-accent);
  font-style: italic;
}

/* Meta info */
.post-meta {
  font-size: 0.85rem;
  color: #888;
  font-style: italic;
}

.post-date i {
  margin-right: 4px;
}

/* Perex */
.post-perex {
  font-size: 1.1rem;
  font-style: italic;
  color: #555;
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

article {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* Text článku */
article p {
  font-size: 1.05rem;
  text-align: justify;
  line-height: 1.75;
  margin-bottom: 1.2rem;
}

/* Nadpisy v článku */
article h2 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  font-size: 1.6rem;
  color: var(--color-secondary);
  border-left: 4px solid var(--color-secondary);
  padding-left: 0.75rem;
}

/*================================================================
10. STRÁNKA O MNĚ
================================================================*/

.about-text {
  text-align: justify;
  line-height: 1.7;
}

.about-text p {
  margin-bottom: 1.5em;
}

/*================================================================
11. FOOTER
================================================================*/

footer {
  background-color: #fff;
}

footer .small {
  color: var(--color-accent);
}

/*================================================================
12. RESPONSIVE
================================================================*/

@media (min-width: 992px) {
  .page-heading h1,
  .page-title {
    font-size: 4.5rem;
  }

  .subheading,
  .page-subtitle {
    font-size: 1.6rem;
  }
}