/* =========================================================
   Calea Credinței — stylesheet
   Palette: bleumarin profund / auriu vechi / crem pergament
   ========================================================= */

:root{
  --navy-deep:   #0F1F38;
  --navy-mid:    #16294A;
  --gold:        #B8924A;
  --gold-bright: #D4AF6A;
  --parchment:   #F2EBDC;
  --ivory:       #FAF7F0;
  --wine:        #5C1A1A;
  --ink:         #2A2418;
  --line:        rgba(184,146,74,0.35);

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'EB Garamond', Georgia, serif;
  --font-caption: 'Source Sans Pro', Arial, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--navy-deep);
  color:var(--ink);
  font-size:18px;
  line-height:1.65;
}

a{color:inherit; text-decoration:none;}

/* ---------- Layout shell ---------- */
.shell{
  display:flex;
  min-height:100vh;
}

/* ---------- Sidebar ---------- */
.sidebar{
  width:280px;
  flex-shrink:0;
  background:
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy-mid) 100%);
  color:var(--ivory);
  padding:0;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  border-right:1px solid var(--line);
}

.brand{
  padding:34px 28px 22px;
  border-bottom:1px solid var(--line);
}
.brand .mark{
  width:40px;height:40px;
  margin-bottom:14px;
  position:relative;
}
.brand .mark::before,
.brand .mark::after{
  content:"";
  position:absolute;
  background:var(--gold-bright);
}
.brand .mark::before{ /* vertical bar of cross */
  left:50%; top:0;
  width:4px; height:40px;
  transform:translateX(-50%);
}
.brand .mark::after{ /* horizontal bar */
  left:50%; top:10px;
  width:28px; height:4px;
  transform:translateX(-50%);
}
.brand h1{
  font-family:var(--font-display);
  font-size:1.7rem;
  font-weight:600;
  margin:0;
  letter-spacing:0.02em;
  color:var(--ivory);
}
.brand p{
  font-family:var(--font-caption);
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--gold);
  margin:6px 0 0;
}

nav.menu{padding:18px 0 30px;}
nav.menu a{
  display:flex;
  align-items:center;
  gap:14px;
  padding:13px 28px;
  font-family:var(--font-caption);
  font-size:0.93rem;
  letter-spacing:0.02em;
  color:rgba(250,247,240,0.78);
  border-left:3px solid transparent;
  transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
nav.menu a:hover{
  background:rgba(184,146,74,0.10);
  color:var(--ivory);
}
nav.menu a.active{
  background:rgba(184,146,74,0.16);
  border-left-color:var(--gold-bright);
  color:var(--ivory);
  font-weight:600;
}
nav.menu .glyph{
  width:18px; text-align:center;
  color:var(--gold);
  font-size:1rem;
}

.sidebar-foot{
  padding:20px 28px 30px;
  font-family:var(--font-caption);
  font-size:0.74rem;
  color:rgba(250,247,240,0.45);
  border-top:1px solid var(--line);
}

/* ---------- Main content ---------- */
main{
  flex:1;
  background:var(--parchment);
  min-width:0;
}

.page-header{
  background:var(--navy-deep);
  color:var(--ivory);
  padding:64px 56px 48px;
  position:relative;
  overflow:hidden;
}
.page-header::after{
  content:"";
  position:absolute;
  right:-60px; top:-60px;
  width:240px; height:240px;
  border:1px solid var(--line);
  border-radius:50%;
}
.page-header .eyebrow{
  font-family:var(--font-caption);
  font-size:0.76rem;
  text-transform:uppercase;
  letter-spacing:0.18em;
  color:var(--gold-bright);
  margin:0 0 10px;
}
.page-header h2{
  font-family:var(--font-display);
  font-size:2.6rem;
  font-weight:600;
  margin:0 0 14px;
  max-width:680px;
}
.page-header p.lede{
  font-family:var(--font-body);
  font-size:1.15rem;
  color:rgba(250,247,240,0.82);
  max-width:560px;
  margin:0;
}

.content-wrap{
  padding:52px 56px 90px;
  max-width:860px;
}

/* ornamental divider — signature element */
.ornament{
  display:flex;
  align-items:center;
  gap:16px;
  margin:46px 0 38px;
  color:var(--gold);
}
.ornament::before,
.ornament::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.ornament .glyph{
  font-size:1.1rem;
  flex-shrink:0;
}

article.entry{
  background:var(--ivory);
  border:1px solid var(--line);
  border-radius:2px;
  padding:34px 38px;
  margin-bottom:28px;
  box-shadow:0 1px 3px rgba(15,31,56,0.06);
}
article.entry h3{
  font-family:var(--font-display);
  font-size:1.5rem;
  margin:0 0 6px;
  color:var(--navy-deep);
}
article.entry .meta{
  font-family:var(--font-caption);
  font-size:0.74rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--wine);
  margin-bottom:14px;
}
article.entry p{
  margin:0 0 14px;
  color:var(--ink);
}
article.entry p:last-child{margin-bottom:0;}

blockquote{
  border-left:3px solid var(--gold);
  margin:24px 0;
  padding:4px 0 4px 20px;
  font-family:var(--font-display);
  font-size:1.2rem;
  font-style:italic;
  color:var(--navy-deep);
}

.empty-state{
  background:var(--ivory);
  border:1px dashed var(--line);
  padding:48px 38px;
  text-align:center;
  color:rgba(42,36,24,0.6);
}
.empty-state .glyph{
  font-size:1.6rem;
  color:var(--gold);
  margin-bottom:12px;
  display:block;
}
.empty-state h3{
  font-family:var(--font-display);
  color:var(--navy-deep);
  margin:0 0 8px;
}

/* Calendar widget */
.calendar-card{
  background:var(--ivory);
  border:1px solid var(--line);
  padding:30px 34px;
  margin-bottom:24px;
}
.calendar-card .date-big{
  font-family:var(--font-display);
  font-size:2.2rem;
  color:var(--navy-deep);
  margin:0 0 4px;
}
.calendar-card .saint-name{
  font-family:var(--font-caption);
  font-size:0.85rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--wine);
}
.calendar-card .fast-note{
  margin-top:14px;
  font-family:var(--font-caption);
  font-size:0.85rem;
  color:rgba(42,36,24,0.7);
  padding-top:14px;
  border-top:1px solid var(--line);
}

/* ---------- Hamburger (mobile) ---------- */
.menu-toggle{
  display:none;
  position:fixed;
  top:18px; left:18px;
  z-index:50;
  background:var(--navy-deep);
  color:var(--gold-bright);
  border:1px solid var(--line);
  width:42px; height:42px;
  font-size:1.2rem;
  cursor:pointer;
}

/* ---------- Responsive ---------- */
@media (max-width: 880px){
  .shell{flex-direction:column;}
  .sidebar{
    position:fixed;
    left:0; top:0;
    height:100vh;
    transform:translateX(-100%);
    transition:transform 0.25s ease;
    z-index:40;
    width:260px;
  }
  .sidebar.open{transform:translateX(0);}
  .menu-toggle{display:block;}
  main{width:100%;}
  .page-header{padding:80px 24px 36px;}
  .page-header h2{font-size:2rem;}
  .content-wrap{padding:32px 22px 60px;}
  article.entry{padding:26px 22px;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .sidebar{transition:none;}
}

/* ---------- Image placeholders ---------- */
.img-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  margin:30px 0 40px;
}
.img-frame{
  aspect-ratio:4/3;
  background:
    repeating-linear-gradient(45deg, rgba(184,146,74,0.08) 0 10px, transparent 10px 20px),
    var(--ivory);
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:14px;
  color:rgba(42,36,24,0.55);
}
.img-frame .glyph{
  font-size:1.6rem;
  color:var(--gold);
  margin-bottom:8px;
}
.img-frame span.label{
  font-family:var(--font-caption);
  font-size:0.72rem;
  letter-spacing:0.04em;
}
.entry-image{
  width:100%;
  aspect-ratio:16/9;
  background:
    repeating-linear-gradient(45deg, rgba(184,146,74,0.08) 0 10px, transparent 10px 20px),
    var(--ivory);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(42,36,24,0.5);
  font-family:var(--font-caption);
  font-size:0.8rem;
  margin-bottom:18px;
}

@media (max-width: 880px){
  .img-grid{grid-template-columns:repeat(2, 1fr);}
}

/* ---------- Contact page ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:32px;
}
@media (max-width: 880px){
  .contact-grid{grid-template-columns:1fr;}
}
.contact-card{
  background:var(--ivory);
  border:1px solid var(--line);
  padding:30px 32px;
}
.contact-card h3{
  font-family:var(--font-display);
  color:var(--navy-deep);
  margin-top:0;
}
.contact-list{list-style:none; padding:0; margin:0;}
.contact-list li{
  padding:10px 0;
  border-bottom:1px solid var(--line);
  display:flex;
  gap:12px;
}
.contact-list li:last-child{border-bottom:none;}
.contact-list .glyph{color:var(--gold); width:20px;}

form.contact-form label{
  display:block;
  font-family:var(--font-caption);
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--navy-deep);
  margin-bottom:6px;
}
form.contact-form input,
form.contact-form textarea{
  width:100%;
  font-family:var(--font-body);
  font-size:1rem;
  padding:11px 13px;
  border:1px solid var(--line);
  background:var(--ivory);
  margin-bottom:18px;
  color:var(--ink);
}
form.contact-form input:focus,
form.contact-form textarea:focus{
  border-color:var(--gold);
}
form.contact-form button{
  font-family:var(--font-caption);
  font-size:0.88rem;
  letter-spacing:0.04em;
  background:var(--navy-deep);
  color:var(--ivory);
  border:1px solid var(--navy-deep);
  padding:13px 28px;
  cursor:pointer;
  transition:background 0.2s ease;
}
form.contact-form button:hover{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--navy-deep);
}

/* ---------- Acatist structure ---------- */
.acatist-card{
  background:var(--ivory);
  border:1px solid var(--line);
  padding:36px 40px;
  margin-bottom:30px;
}
.acatist-card .acatist-title{
  font-family:var(--font-display);
  font-size:1.9rem;
  color:var(--navy-deep);
  margin:0 0 6px;
  text-align:center;
}
.acatist-card .acatist-sub{
  font-family:var(--font-caption);
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--wine);
  text-align:center;
  margin:0 0 28px;
}
.strofa{
  margin-bottom:22px;
}
.strofa .strofa-label{
  font-family:var(--font-caption);
  font-size:0.74rem;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--gold);
  margin-bottom:6px;
  display:block;
}
.strofa p{
  margin:0 0 8px;
  color:var(--ink);
}
.strofa .bucura{
  color:var(--navy-deep);
  font-style:italic;
}
details.icos-toggle{
  margin-bottom:14px;
}
details.icos-toggle summary{
  cursor:pointer;
  font-family:var(--font-caption);
  font-size:0.85rem;
  color:var(--wine);
  padding:6px 0;
}
details.icos-toggle[open] summary{
  margin-bottom:8px;
}