:root {
  /* Pozadia – svetlé, slávnostné, sakrálne */
  --bg-body: #f8f5ef;     /* svetlá krémová, jemná a čistá */
  --bg-body2: #efe7db;    /* svetlá béžová s nádychom zlata */
  --bg-wrapper: #ffffff;
  --bg-sidebar: #f8f5ef;
  --bg-nav: #ffffff;
  --bg-hero: #e9ddc7;     /* teplé svetlo oltára */
  --bg-footer: #f8f5ef;

  /* Text – dôstojné, teplé odtiene */
  --text-main: #4a3f33;   /* tmavé drevo, veľmi čitateľné */
  --text-dark: #2b2622;   /* kontrastný sakrálny tón */
  --text-light: #ffffff;
  --text-muted: #7c7166;  /* jemná sivohnedá */
  --text-grey: #8d8379;

  /* Akcentová paleta – liturgická zlatá */
  --accent: #c49a52;      /* hlavná zlatá – dôstojná, nie krikľavá */
  --accent-light: #e3c98a;/* svetlá zlatá – jemné zvýraznenia */
  --accent-gold: #f0dfb9; /* veľmi svetlá zlatá – pozadia, podčiarknutia */
  --text-accent: #8c3f3f; /* tlmená rubínová – liturgická červená */
  --text-footer-muted: #c49a52;

  /* Credits – jemné, nenápadné */
  --text-credits: #5a514a;
  --text-credits-hover: #3f3833;

  /* Sivé odtiene – teplá paleta */
  --grey-100: #f8f5ef;
  --grey-200: #efe7db;
  --grey-300: #ded4c7;
  --grey-400: #c2b7a9;
  --grey-600: #7c7166;
  --grey-700: #5f564f;
  --grey-800: #3a2f27;

  /* Orámovania – jemné, zlatisté */
  --border-light: #e8dfd2;
  --border-np: #f3ebdf;

  /* Tiene – jemné, teplé */
  --shadow-xs: 0 1px 3px rgba(0,0,0,0.05);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.12);
  --shadow-lg: 0 6px 18px rgba(0,0,0,0.18);

  --space-section: 1.5rem; /* základná vertikálna medzera */
  --space-hero-top: 1.25rem;
  --space-hero-bottom: 1.25rem;
}


*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 18px;
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-body);
  font-family: "Lora", serif;
  line-height: 1.6;
  font-size: 0.9375rem;
  text-align: center;
  opacity: 0;
  animation: fadeInPage 0.3s ease-out forwards;
}

@keyframes fadeInPage {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#wrapper {
  background-color: var(--bg-wrapper);
  max-width: 75rem;
  width: 100%;
  margin: 1rem auto;
  padding: 1.5rem;
  position: relative;
  text-align: left;
  box-shadow: var(--shadow-xs);
  border-radius: 0.75rem;
}

.header-modern {
  text-align: center;
  background-color: #fff;
  position: relative;
  z-index: 1000;
  padding: 1rem 0;
}

.site-title-wrapper {
  text-align: center;
  position: relative;
}

.site-cross {
  margin-bottom: 0.6rem; /* jemný odstup od nadpisu */
  filter: drop-shadow(0 1px 3px rgba(196,154,82,0.4)); /* jemné svetlo */
}

.site-cross svg {
  display: inline-block;
  vertical-align: middle;
  stroke: var(--accent);
  background: linear-gradient(to bottom, #d4a85c, #b3833b);
  -webkit-background-clip: text;
  color: transparent;
}

.site-title span {
  background: linear-gradient(to right, #b86a2a, var(--accent), var(--accent-light));
  -webkit-background-clip: text;
  color: transparent;
}

.site-title a {
  font-family: "Cormorant Garamond", serif;
  font-size: 3.2rem;
  letter-spacing: 0.6px;
  text-decoration: none;
  color: #2f2a26;
  text-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.site-title span {
  background: linear-gradient(to right, #b86a2a, var(--accent), var(--accent-light));
  -webkit-background-clip: text;
  color: transparent;
}

/* NAVIGÁCIA */
.hamburger {
  display: none;
}

.light-nav {
  background-color: var(--bg-nav);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  border-radius: 10px;
  overflow: visible;
  margin-top: 0.75rem;  /* namiesto 1.25rem */
  margin-bottom: 0.75rem;
  justify-content: center;
}

.light-nav ul {
  list-style: none;
  display: flex;
  justify-content: space-between; /* rovnomerné rozloženie */
  flex-wrap: nowrap;              /* zabráni zalomeniu */
  gap: 0;                         /* odstráni dodatočné medzery */
  margin: 0 auto;
  max-width: 100%;
}

.light-nav a {
  display: block;
  padding: 0.9rem 1rem;           /* zmenšené horizontálne medzery */
  color: var(--accent);
  text-decoration: none;
  font-family: "Lato", sans-serif;
  font-weight: 500;
  position: relative;
  transition: color 0.3s ease;
  letter-spacing: 0.3px;
  font-size: 1.05rem;             /* mierne zmenšené písmo */
  white-space: nowrap;            /* zabráni zalomeniu textu */
}

.light-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(to right, #b86a2a, var(--accent-light), #b86a2a);
  transform: translateX(-50%);
  transition: width 0.35s ease, box-shadow 0.35s ease;
  opacity: 0.9;
}

.light-nav a:hover {
  color: var(--accent-light);
  transform: translateY(-1px);
}

.light-nav a:hover::after,
.light-nav a.active::after {
  width: 100%;
  box-shadow: 0 0 5px rgba(187,107,58,0.35);
}

.light-nav a.active {
  color: var(--accent);
  font-weight: 600;
}
.light-nav a.active::after {
  width: 100%;
  box-shadow: 0 0 6px rgba(187,107,58,0.45);
}

section {
  margin-top: var(--space-section);
  margin-bottom: var(--space-section);
}

/* Jemné doladenie pre prvú sekciu pod hero */
section:first-of-type {
  margin-top: 1.25rem;
}
/* HERO */

.hero {
  position: relative;
  width: 100%;
  height: 400px;
  margin-bottom: 1.75rem;
  overflow: hidden;
  border-radius: 8px;
  text-align: center;
  margin-top: 0.75rem;   /* namiesto 1.25rem */
  margin-bottom: 0.75rem;   /* namiesto 1.5rem */
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: heroImageFade 0.5s ease-out forwards;
}

@keyframes heroImageFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero-text {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #ffffff;
  font-family: "Cormorant Garamond", serif;
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  line-height: 1.2;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  animation: heroFadeIn 0.6s ease-out forwards;
  text-shadow: 0 0 6px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.25);
}

@keyframes heroFadeIn {
  from { opacity: 0; transform: translate(-50%, -45%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

.hero-text span {
  display: block;
  font-size: 2.9rem;
  margin-top: 0.35rem;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

.hero::after {
  content: "";
  display: block;
  width: 60%;
  height: 1px;
  margin: 1rem auto 0;
  background: linear-gradient(to right, transparent, var(--accent-light), transparent);
  opacity: 0.6;
}

.hero-fade {
  height: 10px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 100%);
  margin-bottom: 1.75rem;
  border-radius: 0 0 8px 8px;
}

.hero img {
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
/* LAYOUT */

/*
.main-layout {
  display: flex;
  gap: 1.25rem;
  max-width: 75rem;
  margin: 0 auto;
  align-items: flex-start;
}
*/

.main-layout {
  display: block;
  max-width: 75rem;
  margin: 0 auto;
}

/*
main {
  max-width: 65rem;   
  flex: 1;
  order: 1;
  background: #ffffff;
  padding: 1.25rem 2rem;
  border-radius: 0.75rem;
  box-shadow: var(--shadow-sm);
  line-height: 1.65;
  color: var(--text-main);
  font-size: 1.05rem;
  margin-top: 0;
  padding-top: 0.5rem; 
*/
main {
  max-width: 75rem;   
  background: #ffffff;
  padding: 1.25rem 2rem;   /* PÔVODNÝ padding – nechávame */
  border-radius: 0.75rem;
  box-shadow: var(--shadow-sm);
  line-height: 1.65;
  color: var(--text-main);
  font-size: 1.05rem;
  margin: 0 auto;          /* vycentrovanie */
  padding-top: 0.5rem;     /* jemný dych priestoru */
}



/* TYPOGRAFIA – NADPISY, TEXT */

main h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: 2.25rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 1rem 0 1.5rem;
  letter-spacing: 0.5px;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

main h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--text-dark);
  letter-spacing: 0.5px;
  line-height: 1.2;
  margin: 1.5rem 0 1rem;
}

main h3 {
  font-size: 1.4rem;
  font-weight: 600;
  margin: 1.25rem 0 0.75rem;
  color: var(--text-dark);
  letter-spacing: 0.3px;
  line-height: 1.2;
}

main p {
  margin: 0.75rem 0 1.25rem;
  color: var(--text-main);
}

main p.datum-clanku {
  margin-bottom: 0.75rem;
  color: var(--text-grey);
  font-style: italic;
  font-size: 0.95rem;
}

main ul,
main ol {
  margin: 0 0 1.5rem 1.5rem;
  color: var(--text-main);
}

main li {
  margin: 0.4rem 0;
}

main li::marker {
    font-size: 0.6em;   /* menšie guličky */
    color: var(--text-muted); /* jemná farba, ak chceš */
}

main a {
  color: var(--accent);
  text-decoration: underline;
  position: relative;
  transition: color 0.3s ease;
}

main a:hover {
  color: var(--text-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* SIDEBAR */

/* ================================
   SIDEBAR – zjednotený vzhľad
   ================================ */

#sidebar {
  flex: 0 0 15.625rem;
  order: 2;
  background-color: var(--bg-wrapper);
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.25rem; /* zmenšené, harmonizované */
  gap: 1.5rem;              /* rovnaký rytmus ako sekcie */
  border-radius: 0.75rem;
  box-shadow: var(--shadow-sm);
}

/* Sekcie v sidebare */
#sidebar section {
  display: flex;
  flex-direction: column;
  gap: 0.6rem; /* jemnejšie, menej vzdušné */
  padding-left: 0.75rem;
  border-left: 2px solid var(--accent); /* zjednotené s headerom */
}

/* Nadpisy – rovnaký vizuálny jazyk ako na stránke */
#sidebar h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-dark);
  letter-spacing: 0.2px;
  margin: 0 0 0.4rem 0;
  line-height: 1.25;
  font-family: "Cormorant Garamond", serif;
}

#sidebar h4 {
  font-size: 1.0rem;
  font-weight: 600;
  color: var(--text-grey);
  margin: 0 0 0.35rem 0;
  letter-spacing: 0.2px;
  font-family: "Cormorant Garamond", serif;
}

/* Obrázky */
/* Obrázok interiéru kostola v sidebare */
#sidebar .interier-bohosluzby-wrapper {
  margin: 0.5rem 0 1.25rem 0;
  display: flex;
  justify-content: center;
}

#sidebar .interier-bohosluzby {
  width: 100%;
  max-width: 260px; /* jemné obmedzenie šírky */
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 2px solid rgba(196, 154, 82, 0.25); /* jemný zlatý rám */
  margin: 0;
  object-fit: cover; /* zachová proporcie */
}

#sidebar a.rozpis {
  background: var(--grey-100);
  color: var(--text-grey);
  font-style: italic;
  text-align: center;
  text-decoration: none;
  padding: 0.3rem 0.5rem;
  display: block;
  border-radius: 0.5rem;
  transition: color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;

  /* zabráni zalomeniu textu */
  white-space: nowrap;

  /* estetické správanie pri dlhšom texte */
  overflow: hidden;
  text-overflow: ellipsis;

  /* jemné zmenšenie písma */
  font-size: 0.9rem;
}

/* Hover efekt */
#sidebar a.rozpis:hover {
  background: var(--grey-200);          /* jemné zosvetlenie pozadia */
  color: var(--accent-dark);            /* tvoja zlatá farba */
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

#sidebar a.rozpis:hover {
  color: var(--text-dark);
  background: var(--grey-200);
}

/* Odkazy v zoznamoch */
#sidebar ul.sidebar-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

#sidebar ul.sidebar-links li {
  margin: 0.35rem 0;
  font-size: 0.95rem;
}

#sidebar ul.sidebar-links li a {
  color: var(--text-main);
  text-decoration: underline;
  text-underline-offset: 2px;
  position: relative;
  padding: 0.1rem 0;
  transition: color 0.3s ease;
}

#sidebar ul.sidebar-links li a:hover {
  color: var(--accent);
}

/* Tabuľky */
#sidebar table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

#sidebar table tr + tr td {
  border-top: 1px solid rgba(0,0,0,0.05);
}

#sidebar table td {
  padding: 0.25rem 0.375rem;
  text-align: right;
}

#sidebar table td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--text-dark);
}

/* Šípka pred odkazmi */
.link-arrow::before {
  content: "» ";
  color: var(--accent);
}

/* Obrázky vo figure */
#sidebar figure {
  display: flex;
  justify-content: center;
}

#sidebar figure.fatimska-panna-maria img {
  display: block;
  margin: 0 auto;
}

#sidebar figure.fatimska-panna-maria {
  margin: 0.6rem 0;
  display: flex;
  justify-content: center;
}

/* FOOTER */

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  background: var(--bg-footer);
  padding: 2.25rem 1.75rem;
  margin-top: 2.5rem;
  border-radius: 0.75rem;
  box-shadow: var(--shadow-xs);
}

footer section {
  flex: 1 1 15rem;
  min-width: 15rem;
  padding-left: 1rem;
  border-left: 3px solid var(--accent);
}

footer h4 {
  color: var(--text-dark);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  letter-spacing: 0.3px;
  font-family: "Cormorant Garamond", serif;
}

footer p,
footer address p {
  color: var(--text-grey);
  font-size: 0.85rem;
  margin: 0.35rem 0;
  line-height: 1.45;
}

footer a {
  color: var(--text-grey);
  text-decoration: underline;
  text-decoration-color: rgba(0,0,0,0.25);
  text-underline-offset: 2px;
  position: relative;
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

footer a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: linear-gradient(to right, var(--accent), var(--accent-light), var(--accent));
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

footer a:hover {
  color: var(--text-accent);
  text-decoration-color: var(--accent);
}

/*footer a:hover::after {
  width: 100%;
}
*/

.credits {
  width: 100%;
  text-align: center;
  margin-top: 1rem;
  color: var(--text-credits);
  font-size: 0.6875rem;
  font-style: italic;
  letter-spacing: 0.2px;
}

.credits a {
  color: var(--text-credits);
}

.credits a:hover {
  color: var(--text-credits-hover);
}

/* OBRÁZKY */

img {
  border-radius: 0.5rem;
  box-shadow: var(--shadow-sm);
  max-width: 100%;
  height: auto;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

img:hover {
  transform: scale(1.01);
  box-shadow: var(--shadow-md);
}

img.no-style {
  border-radius: 0;
  box-shadow: none;
}

main img {
  margin: 1.5rem 0;
}

.imgr {
  float: right;
  margin: 5px 0 5px 10px;
  display: inline-block;
}

/* VIDEO */

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 0.75rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.75rem;
}

.video-container iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 0;
}

/* DEFINÍCIE (dl/dt/dd) */

dl {
  margin: 2rem 0;
  border-left: 3px solid var(--accent);
  padding-left: 1.25rem;
}

dt {
  font-weight: 600;
  margin-top: 1rem;
  color: var(--text-dark);
  letter-spacing: 0.3px;
  line-height: 1.45;
  font-family: "Cormorant Garamond", serif;
}

dd {
  margin: 0.35rem 0 1rem 0;
  color: var(--text-main);
  line-height: 1.55;
}

/* DETAILS / SUMMARY */

details {
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  margin: 0.5rem 0;
}

summary {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  list-style: none;
  user-select: none;
  position: relative;
  padding: 0.2rem 1.5rem 0.2rem 0;
  letter-spacing: 0.25px;
  font-family: "Cormorant Garamond", serif;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "▸";
  position: absolute;
  right: 0;
  top: 0.1rem;
  font-size: 1rem;
  transition: transform 0.25s ease;
  color: var(--accent);
}

details[open] summary::after {
  transform: rotate(90deg);
}

details > div,
details > ul {
  margin-top: 0.5rem;
  padding-left: 0.5rem;
  color: var(--text-main);
  font-size: 0.95rem;
  line-height: 1.5;
}

details ul {
  margin: 0.4rem 0 0;
  padding-left: 1rem;
}

details li {
  margin: 0.25rem 0;
}

details a {
  color: var(--text-accent);
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease;
}

details a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: linear-gradient(
    to right,
    var(--accent),
    var(--accent-light),
    var(--accent)
  );
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

details a:hover {
  color: var(--accent);
}

details a:hover::after {
  width: 100%;
}

h1, h2, h3 {
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
}

p {
  margin-bottom: 0.75rem;
  line-height: 1.6;
}

/* Obrázok kostola – zarovnaný vpravo */
.hero-image-right {
  float: right;
  width: 260px;
  margin: 0.2rem 0 1rem 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 2px solid rgba(196, 154, 82, 0.25);
}

/* Textový blok vedľa obrázka */
.uvod-sekcia {
  overflow: hidden; /* zabráni pretečeniu floatu */
}

.uvod-sekcia h1,
.uvod-sekcia p {
  margin-right: 280px; /* rezervuje miesto pre obrázok */
  max-width: calc(100% - 280px);
}

/* Vyčistenie floatu pre nasledujúce sekcie */
.uvod-sekcia::after {
  content: "";
  display: block;
  clear: both;
}

@media (max-width: 768px) {
  .uvod-sekcia h1,
  .uvod-sekcia p {
    margin-right: 0;
    max-width: 100%;
  }

  .hero-image-right {
    float: none;
    display: block;
    margin: 1rem auto;
    width: 85%;
  }
}

li.tucne-pismo {
  font-weight: 600;
}

main .tucne-pismo {
    font-weight: 600; /* alebo 700 */
    font-size: 1.05em; /* ak chceš väčšie */
}