:root{
  --bg:#000000; --text:#ffffff; --accent:#c41616;
  --card:#0f0f10; --muted:#bdbdbd;
  --header-height:48px;
  --header-height-mobile:40px;
  /* paleta para estilo "Iluminuria Gregoriana Suave" */
  --illum-bg-1:#fbf6ef; /* pergaminho claro */
  --illum-bg-2:#efe3cd; /* pergaminho levemente envelhecido */
  --illum-text:#2b2b2b; /* texto escuro sobre pergaminho */
  --illum-link:#2b2f6b; /* azul régio das iluminuras */
  --illum-gold:#c68a14; /* dourado suave */
  /* additional palette and layout tokens */
  --gold:#d4af37;
  --parchment:#fbf6ef;
  --panel-bg:#161616;
  --panel-contrast:#1c1c1c;
  --content-gap:20px;
  --card-radius:8px;
  --soft-shadow: 0 6px 12px rgba(0,0,0,0.14);
}

/* ====== Forçar cor dourada única aos itens principais do side-nav ======
   Aplica em estado normal e hover, tanto com menu fechado quanto com
   `body.nav-open` (quando o painel lateral está aberto). Mantém tamanhos
   e espaçamentos. */
.side-nav > ul > li > a,
.side-nav > ul > li > details > summary,
body.nav-open .side-nav > ul > li > a,
body.nav-open .side-nav > ul > li > details > summary{
  color: #c9a227 !important;
}

.side-nav > ul > li > a:hover,
.side-nav > ul > li > details > summary:hover,
body.nav-open .side-nav > ul > li > a:hover,
body.nav-open .side-nav > ul > li > details > summary:hover{
  color: #c9a227 !important;
}

/* Triângulos/ícones de expansão (summary::before) */
.side-nav details summary::before,
body.nav-open .side-nav details summary::before{
  color: #c9a227 !important;
}

/* Garantir legibilidade: adicionar leve text-shadow apenas para contraste */
.side-nav > ul > li > a,
.side-nav > ul > li > details > summary{
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

*{box-sizing:border-box}
.site-header{background:transparent}
body{
  font-family: 'Inter', sans-serif;
  margin:0; background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased;
}

/* Tipografia: usar EB Garamond (bold) para menu e títulos principais */
.menu-btn::after, .side-nav, .side-nav a, .site-header .logo, .header-actions .icon-btn .icon-label{
  font-family: 'EB Garamond', serif;
}
.menu-btn::after{ font-weight:800; letter-spacing:1px; font-size:13px }
h1, h2, h3, .section-title, .articles h2, .materia h1, .materia h2, .materia h3, .materia-hero h1{
  font-family: 'EB Garamond', serif;
  font-weight:700;
  color:var(--text);
}

/* Evita que o conteúdo fique por baixo do header fixo */
body{padding-top:var(--header-height)}
.site-header{background:transparent}
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; border-bottom:1px solid rgba(255,255,255,0.06);
  position:fixed; top:0; left:0; right:0; z-index:80;
  height:var(--header-height); line-height:var(--header-height);
  /* imagem cobrindo todo o cabeçalho com um gradiente leve por cima (clareado) */
  background-image: linear-gradient(rgba(0,0,0,0.38), rgba(0,0,0,0.38)), url("../assets/img/cabeçalho4.png");
  background-size: cover;
  /* posicionar o foco no topo do banner para que a imagem comece exatamente no topo */
  background-position: center top;
  /* garantir que o background pinte até as bordas do elemento */
  background-clip: border-box;
  background-repeat: no-repeat;
  overflow:hidden;
}
.logo{font-weight:700; font-size:20px; letter-spacing:2px; display:flex; align-items:center; height:100%; padding-left:6px; cursor:pointer}
.logo img{height:44px; width:auto; display:block; margin:0}

/* Header alignment improvements: center logo, equalize spacing and vertical centering */
.site-header{position:fixed; display:flex; align-items:center; justify-content:space-between}

/* center the logo visually without changing sizes of other elements */
.site-header .logo{position:absolute; left:50%; transform:translateX(-50%); z-index:85; padding-left:0}

/* ensure menu button sits at left with consistent spacing */
.menu-btn{margin-left:12px; margin-right:10px}

/* header actions group spacing and vertical centering */
.header-actions{display:flex; align-items:center; gap:14px}
.header-actions .icon-btn{padding:6px 8px}

/* ================= Menu Animations - Medieval / Litúrgico ================= */
/* Applies to top navigation links and header menu items */
.site-header .header-menu, .site-header nav, .site-header .menu-list{display:flex; gap:12px; align-items:center}
.site-header .header-menu a, .site-header nav a, .site-header .menu-list a{position:relative; display:inline-block; color:var(--text); text-decoration:none; padding:6px 4px; transition:letter-spacing .25s ease, transform .25s ease, color .18s ease}

/* Gold Shine underline: pseudo-element animated scaleX */
.site-header .header-menu a::after,
.site-header nav a::after,
.site-header .menu-list a::after{
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, rgba(200,163,78,0.0) 0%, #c8a34e 40%, #d9b46a 100%);
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
  border-radius:2px;
}

/* Hover: reveal gold line, manuscript letter spacing and slight lift */
.site-header .header-menu a:hover,
.site-header nav a:hover,
.site-header .menu-list a:hover{
  letter-spacing: calc(1px + 0.5px);
  transform: translateY(-2px);
}
.site-header .header-menu a:hover::after,
.site-header nav a:hover::after,
.site-header .menu-list a:hover::after{
  transform: scaleX(1);
  opacity: 1;
}

/* Subtle golden glow on hover (discrete) */
.site-header .header-menu a:hover,
.site-header nav a:hover,
.site-header .menu-list a:hover{
  text-shadow: 0 1px 4px rgba(217,180,106,0.18);
}

/* Make sure focus states also show the underline for accessibility */
.site-header .header-menu a:focus::after,
.site-header nav a:focus::after,
.site-header .menu-list a:focus::after{transform:scaleX(1); opacity:1}

/* Mobile: hide the gold line to avoid layout noise and performance issues */
@media(max-width:900px){
  .site-header .header-menu a::after,
  .site-header nav a::after,
  .site-header .menu-list a::after{display:none}
  .site-header .header-menu a, .site-header nav a, .site-header .menu-list a{transform:none}
}

/* Mesmas cores aplicadas quando o menu lateral está aberto (desktop e mobile) */
/* Isso garante que você veja as cores ao abrir o menu sem precisar reduzir a janela. */
/* Início */
body.nav-open .side-nav a.inicio,
body.nav-open .side-nav details summary.inicio,
body.nav-open .side-nav a.inicio,
body.nav-open .side-nav details summary.inicio{
  color: #E8D8A0;
}
body.nav-open .side-nav a.inicio:hover, body.nav-open .side-nav details summary.inicio:hover{
  color: #CCBE8D;
}

/* Formações */
body.nav-open .side-nav a.formacoes,
body.nav-open .side-nav details summary.formacoes{
  color: #C9A86A;
}
body.nav-open .side-nav a.formacoes:hover, body.nav-open .side-nav details summary.formacoes:hover{
  color: #B1935D;
}

/* Advento */
body.nav-open .side-nav details summary.advento{
  color: #5A3A6B;
}
body.nav-open .side-nav details summary.advento:hover{
  color: #4F335E;
}

/* Natal */
body.nav-open .side-nav details summary.natal{
  color: #D4B96F;
}
body.nav-open .side-nav details summary.natal:hover{
  color: #BAA261;
}

/* Quaresma */
body.nav-open .side-nav details summary.quaresma{
  color: #4C2F52;
}
body.nav-open .side-nav details summary.quaresma:hover{
  color: #432948;
}

/* Páscoa */
body.nav-open .side-nav details summary.pascoa{
  color: #F4EBD0;
}
body.nav-open .side-nav details summary.pascoa:hover{
  color: #D7CEB7;
}

/* Tempo Comum */
body.nav-open .side-nav details summary.tempo-comum{
  color: #3E6742;
}
body.nav-open .side-nav details summary.tempo-comum:hover{
  color: #365A3A;
}

/* Ordinário da missa */
body.nav-open .side-nav details summary.ordinario{
  color: #C9A86A;
}
body.nav-open .side-nav details summary.ordinario:hover{
  color: #B1935D;
}

/* Slightly increase hit area for small screens */
.site-header .header-menu a, .site-header nav a, .site-header .menu-list a{padding:8px 6px}

/* End Menu Animations */

/* ========== Extend golden effects to all menu items and tags ========== */
/* Desktop side-nav: apply the same gold-underline and manuscript lift */
@media(min-width:901px){
  .side-nav a{position:relative; display:inline-block; transition:letter-spacing .25s ease, transform .25s ease, color .18s ease; padding:6px 4px}
  .side-nav a::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, rgba(200,163,78,0.0) 0%, #c8a34e 40%, #d9b46a 100%);
    transform-origin: left center;
    transform: scaleX(0);
    opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
    border-radius:2px;
  }
  .side-nav a:hover, .side-nav a:focus{letter-spacing: calc(1px + 0.5px); transform: translateY(-2px); color:var(--text)}
  .side-nav a:hover::after, .side-nav a:focus::after{transform: scaleX(1); opacity:1}
  .side-nav a:hover{ text-shadow: 0 1px 4px rgba(217,180,106,0.12)}
}

/* ===== Forçar cor única (dourado) para os itens litúrgicos listados */
/* Aplica tanto em estado normal quanto quando o menu está aberto (nav-open) */
.side-nav a[href^="pages/advento-"],
.side-nav a[href^="pages/quaresma-"],
.side-nav a[href^="pages/pascoa-"],
.side-nav a[href^="pages/tempo-comum-"],
.side-nav a[href^="pages/natal-"],
.side-nav a[href$="kyrie.html"],
.side-nav a[href$="gloria.html"],
.side-nav a[href$="sanctus.html"],
.side-nav a[href$="agnus-dei.html"],
.side-nav a[href$="pater-noster.html"],
.side-nav a[href$="ad-libitum.html"]{
  color: var(--illum-gold) !important;
}

body.nav-open .side-nav a[href^="pages/advento-"],
body.nav-open .side-nav a[href^="pages/quaresma-"],
body.nav-open .side-nav a[href^="pages/pascoa-"],
body.nav-open .side-nav a[href^="pages/tempo-comum-"],
body.nav-open .side-nav a[href^="pages/natal-"],
body.nav-open .side-nav a[href$="kyrie.html"],
body.nav-open .side-nav a[href$="gloria.html"],
body.nav-open .side-nav a[href$="sanctus.html"],
body.nav-open .side-nav a[href$="agnus-dei.html"],
body.nav-open .side-nav a[href$="pater-noster.html"],
body.nav-open .side-nav a[href$="ad-libitum.html"]{
  color: var(--illum-gold) !important;
}


/* Tags (.tag / small.tag) - subtle golden background on hover */
.tag, small.tag{display:inline-block; transition:background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease}
.tag:hover, small.tag:hover{background: linear-gradient(90deg, rgba(200,163,78,0.06), rgba(217,180,106,0.04)); color:#fff; transform: translateY(-1px); box-shadow:0 8px 18px rgba(217,180,106,0.08)}
.tag:focus, small.tag:focus{outline:2px solid rgba(217,180,106,0.12); outline-offset:2px}

/* Ensure these effects don't clutter mobile: keep tags subtle on small screens */
@media(max-width:900px){
  .tag, small.tag{background:transparent; box-shadow:none}
}

/* Apply gold-tone hover for other important link groups (cards, product links) */
.list-card a:hover, .product-card a:hover, .card a:hover{color:var(--illum-gold); text-shadow:0 1px 3px rgba(217,180,106,0.12)}

/* End extended golden effects */

/* ===== Menu: tópicos maiores, subitens menores ===== */
/* Tópicos / summaries (top-level) */
.side-nav > ul > li > a,
.side-nav > ul > li > details > summary{
  font-size:18px; /* rótulos e summaries topo agora 18px */
  font-weight:600;
  letter-spacing:0.6px;
  color:rgba(255,255,255,0.96);
  text-shadow:none;
}

/* Remover efeitos dourados/underline/transform para itens que NÃO são os dois primeiros */
.side-nav a::after,
.side-nav details summary::after{display:none}

/* Subitens (links dentro de cada details) — menores e sem destaque */
.side-nav details ul a{
  font-size:13px; /* menor que os rótulos */
  font-weight:400;
  letter-spacing:0;
  color:rgba(255,255,255,0.90);
  padding-left:8px;
  transition:none;
}
.side-nav details ul a::after{display:none !important}
.side-nav details ul a:hover, .side-nav details ul a:focus{transform:none; text-shadow:none; color:rgba(255,255,255,0.92); background:transparent; text-decoration:none}

/* Garantir que summaries (os headers dos grupos) não se destaquem além do tamanho do rótulo */
.side-nav details summary{cursor:pointer; padding:6px 0; font-weight:600}

/* ===== Manter destaque apenas para os dois primeiros itens (Início e Formações) ===== */
@media(min-width:901px){
  .side-nav > ul > li:nth-of-type(1) > a,
  .side-nav > ul > li:nth-of-type(2) > a{
    font-size:18px;
    font-weight:800;
    letter-spacing:1.5px;
    color:var(--illum-gold);
    text-shadow:0 2px 8px rgba(198,138,20,0.08);
  }
  .side-nav > ul > li:nth-of-type(1) > a::after,
  .side-nav > ul > li:nth-of-type(2) > a::after{display:block; bottom:-6px; height:4px}
}


/* ======= Ordinário separator styling ======= */
/* Ajuste: aproximar arabesco do item anterior e posicionar o summary
  imediatamente abaixo do arabesco. Não altera o tamanho do arabesco. */
.side-nav li.menu-ordinario{position:relative; padding-top:102px; margin-top:4px}
/* Arabesco central dourado como separador (decorativo) */
.side-nav li.menu-ordinario::before{
  content: '';
  position: absolute;
  left: 50%;
  top: 0px; /* alinhar o topo do arabesco ao topo do li (mais próximo do item anterior) */
  width: 200px; /* largura mantida (não alterada) */
  height: 96px; /* altura mantida (não alterada) */
  transform: translateX(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../assets/img/arabesco.png");
  /* manter proporção e melhor renderização: usar tamanho explícito equivalente */
  background-size: 200px 96px;
  opacity:0.98;
  pointer-events:none;
}

/* Summary do ordinário: reduzir padding-top para que fique imediatamente abaixo do arabesco */
.side-nav li.menu-ordinario details summary{padding-top:6px}

@media(max-width:900px){
  /* menor ornamento em telas pequenas para economizar espaço */
  /* aproximar o ornamento dos itens sem sobrepor */
  .side-nav li.menu-ordinario::before{width:140px;height:72px;top:0px;opacity:0.95; background-image: url("../assets/img/arabesco.png"); background-size: 140px 72px; background-position:center; background-repeat:no-repeat}
  .side-nav li.menu-ordinario{padding-top:78px;margin-top:4px}
}

/* End Ordinário separator styling */

/* search input spacing: ensure it doesn't touch adjacent icons */
#search{margin-left:8px; padding:6px 10px; border-radius:8px; border:1px solid rgba(255,255,255,0.06); background:transparent; color:inherit; height:36px; box-sizing:border-box}

/* keep interactive elements above the centered logo for clickability */
.menu-btn, .header-actions{position:relative; z-index:86}

/* Responsive: on small screens revert logo to normal flow to avoid overlap */
@media(max-width:900px){
  .site-header .logo{position:relative; left:auto; transform:none; margin:0 auto}
  .menu-btn{margin-left:8px}
  .header-actions{gap:10px}
  #search{display:none}
}

/* aplicar mesma animação/destaque dourado ao logo central quando hover */
.logo{position:relative; transition:box-shadow .22s ease}
.logo img{transition:transform .22s ease, filter .22s ease, box-shadow .22s ease}
.logo:hover{ /* don't move the logo container; only highlight */
  box-shadow:0 14px 36px rgba(198,138,20,0.08);
}
.logo:hover img{
  transform:scale(1.06); /* slightly increase without shifting layout */
  filter: sepia(0.9) saturate(6) hue-rotate(12deg) brightness(1.18) contrast(1.06);
  box-shadow: 0 10px 26px rgba(198,138,20,0.12);
}

/* responsivo: reduzir tamanho do ícone em telas muito pequenas */
@media(max-width:480px){
  .logo img{height:32px}
}

@media(max-width:480px){
  body{padding-top:var(--header-height-mobile)}
}

/* Side nav */
.side-nav{position:fixed; left:0; top:0; bottom:0; width:320px; background:var(--bg); box-shadow:2px 0 18px rgba(0,0,0,.12); transform:translateX(-100%); transition:transform .28s ease; z-index:120; display:flex; flex-direction:column;}
.side-nav.open{transform:translateX(0)}
.side-nav .close-nav{background:none; border:none; font-size:28px; padding:12px 18px; cursor:pointer}
.side-nav ul{list-style:none; padding:0 18px; margin:0; /* allow the list to grow and scroll inside the flex column */; overflow:auto; flex:1 1 auto}
.side-nav li{margin:8px 0}
.side-nav a{color:#8ab4ff; text-decoration:none; display:inline-block; padding:4px 0}
.side-nav a:visited{color:#6fa9ff}
.side-nav a:hover{color:#5f93ff; text-decoration:underline}
.side-nav details summary{color:var(--text); cursor:pointer}

/* Estilo iluminado quando o menu está aberto (body.nav-open).
   A imagem agora ocupa todo o painel lateral (background-image), com overlay
   para manter legibilidade dos itens do menu. */
body.nav-open .side-nav{
  background: var(--bg);
  color: #fff;
  transform:translateX(0);
  transition:background .36s ease, box-shadow .36s ease, transform .28s ease;
}

/* Imagem no topo do menu */
.side-nav-hero{width:100%; overflow:hidden; display:block}

/* Frame para imagem: deixa ela 'encaixada' dentro do menu */
.side-nav-hero{width:100%; padding:16px; box-sizing:border-box; display:block}
.side-nav-hero .menu-frame{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02)); border-radius:10px; overflow:hidden; border:4px solid rgba(198,138,20,0.12); box-shadow:0 8px 24px rgba(0,0,0,0.45);}
.side-nav-hero .menu-frame img{width:100%; height:160px; object-fit:cover; display:block}

/* Ajustes específicos para o estilo iluminado */
body.nav-open .side-nav-hero .menu-frame{border-color:rgba(198,138,20,0.9); box-shadow:inset 0 -28px 48px rgba(255,244,220,0.06), 0 18px 40px rgba(10,6,4,0.45)}
body.nav-open .side-nav-hero .menu-frame img{filter:grayscale(3%) contrast(98%) saturate(96%)}

/* Responsivo: reduzir altura em telas pequenas */
@media(max-width:480px){
  .side-nav-hero img{height:110px}
}

/* Estilo iluminado quando o menu está aberto - fundo com imagem cobrindo tudo */
body.nav-open .side-nav{
  /* imagem como background covering */
  background-image: url("../assets/img/1.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: #fff;
  position:fixed; /* garante que pseudo-overlay fique relativo ao nav */
  overflow:hidden;
}

/* overlay para legibilidade */
body.nav-open .side-nav::before{
  content: "";
  position:absolute; inset:0; z-index:1;
  /* overlay mais escuro para garantir legibilidade do texto sobre a imagem */
  background: linear-gradient(180deg, rgba(0,0,0,0.72), rgba(0,0,0,0.55));
  pointer-events:none;
  backdrop-filter: blur(2px) brightness(0.78);
}

/* Conteúdo do nav deve ficar acima do overlay */
body.nav-open .side-nav *{position:relative; z-index:2}

/* Fonte e acabamento mais clássico quando aberto */
body.nav-open .side-nav{font-family: 'EB Garamond', serif}

/* Links adaptados para leitura sobre imagem */
body.nav-open .side-nav a{color:rgba(255,255,255,0.95); text-shadow:0 2px 8px rgba(0,0,0,0.6)}
body.nav-open .side-nav a:hover{color:var(--illum-gold); text-decoration:underline}

/* Summary com marcador dourado e separador sutil */
body.nav-open .side-nav details summary{
  color:rgba(255,255,255,0.95); padding:10px 6px; position:relative; margin:6px 0; border-bottom:1px solid rgba(255,255,255,0.04);
}
body.nav-open .side-nav details summary::before{
  content:'▾'; color:var(--illum-gold); margin-right:8px; display:inline-block; transform:translateY(1px); text-shadow:0 2px 6px rgba(198,138,20,0.25);
}

/* pequeno destaque nas entradas ao passar o mouse */
body.nav-open .side-nav li a:hover{background:linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); border-radius:4px; padding-left:6px}

/* ocultar o bloco hero que antes exibía a imagem separadamente */
body.nav-open .side-nav-hero{display:none}

/* suavizar transições gerais */
.side-nav, .side-nav *{transition:color .22s ease, background .22s ease}
.nav-overlay{position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:110; display:none}
.nav-overlay.show{display:block}

/* Article list style (similar to print) */
.articles h2{font-size:16px; color:var(--muted); letter-spacing:1px}
.list-card{display:flex; gap:22px; align-items:flex-start; padding:18px 0; border-bottom:1px solid #eee}
.list-card img{width:220px; height:130px; object-fit:cover; border-radius:6px}
.list-card .card-body{flex:1}
.tag{color:#d2a021; font-weight:700; font-size:12px; letter-spacing:1px}
.card-actions{margin-top:12px}
.card-actions .btn{margin-right:10px}

@media(max-width:900px){
  .list-card{flex-direction:column}
  .list-card img{width:100%; height:200px}
  .side-nav{width:80%}
}

/* Mobile: cores específicas por tópico (mantém hover escurecido ~12%) */
@media(max-width:900px){
  /* Início */
  .side-nav a.inicio,
  .side-nav details summary.inicio,
  body.nav-open .side-nav a.inicio,
  body.nav-open .side-nav details summary.inicio{
    color: #E8D8A0;
  }
  .side-nav a.inicio:hover, .side-nav details summary.inicio:hover,
  body.nav-open .side-nav a.inicio:hover, body.nav-open .side-nav details summary.inicio:hover{
    color: #CCBE8D;
  }

  /* Formações */
  .side-nav a.formacoes,
  .side-nav details summary.formacoes,
  body.nav-open .side-nav a.formacoes,
  body.nav-open .side-nav details summary.formacoes{
    color: #C9A86A;
  }
  .side-nav a.formacoes:hover, .side-nav details summary.formacoes:hover,
  body.nav-open .side-nav a.formacoes:hover, body.nav-open .side-nav details summary.formacoes:hover{
    color: #B1935D;
  }

  /* Advento */
  .side-nav details summary.advento,
  body.nav-open .side-nav details summary.advento{
    color: #5A3A6B;
  }
  .side-nav details summary.advento:hover, body.nav-open .side-nav details summary.advento:hover{
    color: #4F335E;
  }

  /* Natal */
  .side-nav details summary.natal,
  body.nav-open .side-nav details summary.natal{
    color: #D4B96F;
  }
  .side-nav details summary.natal:hover, body.nav-open .side-nav details summary.natal:hover{
    color: #BAA261;
  }

  /* Quaresma */
  .side-nav details summary.quaresma,
  body.nav-open .side-nav details summary.quaresma{
    color: #4C2F52;
  }
  .side-nav details summary.quaresma:hover, body.nav-open .side-nav details summary.quaresma:hover{
    color: #432948;
  }

  /* Páscoa */
  .side-nav details summary.pascoa,
  body.nav-open .side-nav details summary.pascoa{
    color: #F4EBD0;
  }
  .side-nav details summary.pascoa:hover, body.nav-open .side-nav details summary.pascoa:hover{
    color: #D7CEB7;
  }

  /* Tempo Comum */
  .side-nav details summary.tempo-comum,
  body.nav-open .side-nav details summary.tempo-comum{
    color: #3E6742;
  }
  .side-nav details summary.tempo-comum:hover, body.nav-open .side-nav details summary.tempo-comum:hover{
    color: #365A3A;
  }

  /* Ordinário da missa */
  .side-nav details summary.ordinario,
  body.nav-open .side-nav details summary.ordinario{
    color: #C9A86A;
  }
  .side-nav details summary.ordinario:hover, body.nav-open .side-nav details summary.ordinario:hover{
    color: #B1935D;
  }
}
.header-actions{display:flex; align-items:center; gap:8px}
.header-actions a{text-decoration:none}
.icon-btn{background:none; border:none; cursor:pointer; font-size:18px}
/* make icon + label act as a single column group */
.icon-btn{display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:4px}
/* keep icon+label compact and inside header */
.icon-btn{height:var(--header-height); min-width:48px; padding:4px; box-sizing:border-box}
.icon-btn .icon-img, .icon-btn img{height:28px; width:auto; display:block; filter:brightness(1.12) contrast(1.05); transition:filter .22s ease, transform .22s ease, box-shadow .22s ease}
.icon-btn .icon-img{filter:drop-shadow(0 6px 12px rgba(0,0,0,0.45))}
.icon-btn:hover .icon-img, .icon-btn:focus .icon-img{transform:translateY(-2px) scale(1.06);}

/* estilo circular + contorno dourado para ícones de loja/contato */
.header-actions .icon-btn{width:56px; height:var(--header-height); border-radius:10px; padding:4px; box-sizing:border-box; border:2px solid transparent; background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02)); transition:transform .18s ease, box-shadow .22s ease, border-color .18s ease}
/* Removido contorno dourado permanente: agora o contorno aparece apenas no hover (ver regra de hover abaixo) */

/* efeito de brilho removido conforme solicitado (sem 'vidro' ou shimmer) */

/* hover mais pronunciado para ícones dourados */
/* Apply transform to the inner image only to avoid shifting layout */
.header-actions a.icon-btn[title="Loja"]:hover, .header-actions a.icon-btn[title="Contato"]:hover{
  border-color: rgba(198,138,20,0.98);
}

/* animate the icon image itself (same as other icons) */
.header-actions a.icon-btn[title="Loja"]:hover .icon-img,
.header-actions a.icon-btn[title="Contato"]:hover .icon-img{
  transform:translateY(-2px) scale(1.06);
  filter: sepia(0.9) saturate(6) hue-rotate(12deg) brightness(1.18) contrast(1.06);
  box-shadow: 0 10px 26px rgba(198,138,20,0.12);
}

/* label under the icon */
.icon-btn .icon-label{display:block; font-size:11px; line-height:1; font-weight:700; letter-spacing:1px; color:rgba(255,255,255,0.95); transition:transform .18s ease, color .18s ease, text-shadow .22s ease}
.header-actions a.icon-btn[title="Loja"]:hover .icon-label,
.header-actions a.icon-btn[title="Contato"]:hover .icon-label{
  color:var(--illum-gold); text-shadow:0 6px 20px rgba(198,138,20,0.18);
  transform: translateY(-1px) scale(1.01);
}
.menu-btn{background:rgba(0,0,0,0.35); border:none; font-size:18px; cursor:pointer; color:#fff; padding:6px 10px; border-radius:8px; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,0.6); height:36px; line-height:normal}

/* Mostrar a palavra MENU ao lado dos três riscos */
.menu-btn::after{
  content: "MENU";
  display:inline-block;
  margin-left:10px;
  font-family: 'Inter', sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:1px;
  color:#fff;
}

@media(max-width:480px){
  /* em telas muito pequenas, esconder o texto para economizar espaço */
  .menu-btn::after{display:none}
}

/* ajustar tamanho dos ícones para telas pequenas, igual ao logo */
@media(max-width:480px){
  .icon-btn{height:var(--header-height-mobile)}
  .icon-btn .icon-img, .icon-img{height:24px}
  .icon-btn .icon-label{font-size:10px}
}

/* HERO / CAROUSEL */
.hero-banner{width:100%; padding:18px 0 32px}
.hero-inner{max-width:1150px; margin:0 auto; padding:0 14px}
.capa-superior{width:100%; display:block; border-radius:10px; object-fit:cover}
.carousel{position:relative; border-radius:10px; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch}
.carousel::-webkit-scrollbar{height:10px}
.carousel::-webkit-scrollbar-track{background:transparent}
.carousel::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.06); border-radius:6px}
.slide{position:relative; flex:0 0 100%; display:flex; align-items:center; gap:28px; min-height:420px; scroll-snap-align:center}
.slide::before{content:""; position:absolute; left:0; top:0; right:0; bottom:0; background:linear-gradient(90deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.45) 100%); border-radius:10px}
.slide img{width:55%; height:100%; object-fit:cover; border-radius:10px; z-index:1}
.slide .hero-content{z-index:2}
.slide{cursor:default}
.slide img, .hero-content a, .hero-actions .btn{cursor:pointer}
.slide.active{opacity:1}
.hero-content{width:45%; padding:40px 20px; color:var(--text); text-shadow:0 6px 20px rgba(0,0,0,.6)}
.hero-content small{opacity:.95}
.hero-content h1{font-size:42px; margin:12px 0}
.hero-content p{color:var(--muted); margin-bottom:18px}
.btn{display:inline-block; padding:10px 16px; background:var(--accent); color:#fff; text-decoration:none; border-radius:6px; margin-right:10px}
.btn.outline{background:transparent; border:1px solid rgba(255,255,255,.6); color:#fff}

/* dots */
.carousel-dots{position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:30}
.carousel-dots button{width:12px; height:12px; border-radius:50%; border:2px solid rgba(255,255,255,0.5); background:transparent; cursor:pointer}
.carousel-dots button.active{background:var(--accent); border-color:var(--accent)}

/* carousel arrows */
.carousel-arrow{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:10px; border:none; background:rgba(0,0,0,0.45); color:#fff; font-size:26px; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:40; box-shadow:0 8px 20px rgba(0,0,0,0.6)}
.carousel-arrow.prev{left:12px}
.carousel-arrow.next{right:12px}
.carousel-arrow:hover{background:rgba(0,0,0,0.6); transform:translateY(-50%) scale(1.03)}

/* blur content when nav open */
body.nav-open .container,
body.nav-open .hero,
body.nav-open .site-footer{filter:blur(6px) saturate(.9); transition:filter .28s ease}

/* subtle header backdrop while nav open */
body.nav-open .site-header{background:rgba(0,0,0,0.25)}

/* Removido pseudo-element ::before que duplicava o gradiente do header.
   O gradiente agora é controlado diretamente em `background-image` acima
   (isso evita escurecer o banner duas vezes e garante cobertura uniforme). */

@media(max-width:480px){
  .site-header{min-height:56px; padding:10px 12px}
}

/* ajuste fino: em telas pequenas subir menos para manter foco visual */
@media(max-width:480px){
  .site-header{background-position: center -18px}
}

/* certificar que o conteúdo do cabeçalho fique acima do overlay */
.site-header *{position:relative; z-index:2}

/* card tweaks for list view */
.list-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:20px; border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,0.6); margin-bottom:18px}
.list-card h3{color:var(--text); font-size:20px; margin:8px 0}
.list-card p{color:var(--muted)}

/* MAIN layout */
.container{max-width:1150px; margin:30px auto; display:grid; grid-template-columns:1fr 360px; gap:28px; padding:0 14px}
.articles h2{border-bottom:3px solid rgba(196,22,22,.08); padding-bottom:10px; margin-bottom:16px}
.card{display:flex; gap:18px; background:var(--card); padding:12px; border-radius:8px; box-shadow:0 6px 30px rgba(0,0,0,.45); cursor:pointer; margin-bottom:18px}
.card img{width:180px; height:110px; object-fit:cover; border-radius:6px}
.card-body h3{margin:4px 0}
.meta{color:var(--muted); font-size:12px}

/* aside */
.homily h3{margin:0 0 12px 0}
.video-card img{width:100%; border-radius:8px}

/* footer */
.site-footer{text-align:center; padding:22px 14px; border-top:1px solid #eee; margin-top:40px}

/* responsive */
@media(max-width:900px){
  .container{grid-template-columns:1fr}
  .slide img{display:none}
  .hero-content{width:100%}
}

/* small refinements: buttons */
.btn{background:var(--accent); color:#fff; padding:10px 14px; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.5); text-decoration:none}
.btn.outline{background:transparent; border:1px solid rgba(255,255,255,0.12); color:var(--text)}

/* Estilos específicos para a página de matéria */
/* A matéria agora ocupa ambas as colunas do grid `.container` para ganhar mais largura */
.materia{grid-column:1 / -1; max-width:none; width:100%; margin:48px auto; padding:28px; box-sizing:border-box; background:transparent}
.materia h1, .materia h2, .materia h3{font-family:'EB Garamond', serif; color:var(--text); margin:18px 0; text-align:left}
.materia h1{font-size:28px}
.materia h2{font-size:22px}
.materia h3{font-size:18px}
.materia p, .materia li{font-family:'Inter', sans-serif; color:var(--muted); line-height:1.8; font-size:18px}
.materia p{margin:0 0 14px 0}
.materia ul{text-align:left; margin-left:22px}

/* responsivo: ajustar padding e tamanhos para telas pequenas */
@media(max-width:900px){
  .materia{padding:18px; margin:20px 12px}
  .materia h1{font-size:22px}
  .materia h2{font-size:18px}
  .materia p, .materia li{font-size:16px}
}

/* Cabeçalho da matéria: título no topo acima do artigo */
.materia-hero{grid-column:1 / -1; text-align:center; padding:18px 14px 6px; margin-top:8px}
.materia-hero h1{font-family:'EB Garamond', serif; font-size:34px; margin:6px 0; color:var(--text)}
.materia-hero .meta{font-family:'Inter', sans-serif; font-style:italic; font-size:16px; color:var(--muted); margin:6px 0 0}

@media(max-width:900px){
  .materia-hero h1{font-size:26px}
  .materia-hero .meta{font-size:14px}
}

/* hide outlines on click but keep accessible focus */
.btn:focus, .menu-btn:focus, .icon-btn:focus {outline:2px solid rgba(255,255,255,0.08); outline-offset:2px}

/* existing dark mode (no changes needed) kept for legacy */
body.dark{ --bg:#121213; --text:#e9e9e9; --card:#161617; --muted:#bbbbbb; }

/* Banner de aviso para a página da loja (Em breve) */
.store-coming{
  background: linear-gradient(90deg, rgba(198,138,20,0.06), rgba(255,255,255,0.02));
  border-left:4px solid var(--illum-gold);
  padding:14px 16px; margin:10px 0 18px; border-radius:8px;
  color:var(--illum-text); font-weight:600; font-size:16px;
  box-shadow:0 8px 24px rgba(0,0,0,0.18);
}
.store-coming strong{color:var(--illum-gold); margin-right:6px}

@media(max-width:900px){
  .store-coming{font-size:15px}
}

/* Grid de produtos para loja (diferente da lista de artigos/vídeos) */
.products-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top:12px}
.product-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.03)); padding:12px; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.45); display:flex; flex-direction:column; align-items:stretch}
.product-card img{width:100%; height:160px; object-fit:cover; border-radius:8px}
.product-card h3{margin:12px 0 6px; color:var(--text); font-size:18px}
.product-card p{color:var(--muted); font-size:14px; margin:0 0 12px}
.product-card .price{font-weight:800; color:var(--illum-gold); font-size:18px; margin-bottom:10px}
.product-card .actions{margin-top:auto; display:flex; gap:8px}
.product-card .actions .btn{flex:1}
.announcement-list{display:flex; flex-direction:column; gap:10px; margin-bottom:14px}
.announcement{background:linear-gradient(90deg, rgba(198,138,20,0.04), rgba(0,0,0,0.02)); padding:12px; border-radius:8px; border-left:4px solid rgba(198,138,20,0.9)}
.announcement h4{margin:0 0 6px; font-size:16px}
.announcement p{margin:0; color:var(--muted)}

/* QR Code fixo no lado direito */
/* QR code dentro da coluna 'homily' - mesmo tamanho da imagem de homilia */
.homily .homily-qrcode{width:100%; height:auto; display:block; border-radius:6px; box-shadow:0 6px 12px rgba(0,0,0,0.12); border:2px solid rgba(212,175,55,0.06); background:rgba(255,245,220,0.02); margin-bottom:10px; opacity:0.96; will-change:transform,box-shadow}
@media(max-width:900px){
  .homily .homily-qrcode{display:block}
}

/* Sidebar (homily) layout and subtle styling */
.homily{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:stretch;
}

.homily-qrcode-wrap{display:flex; justify-content:center; align-items:center; padding:6px; background:transparent}

/* Make the homilia/author image visually softer and cohesive with medieval-sacral look */
.video-card img{
  width:100%;
  height:auto;
  border-radius:6px;
  object-fit:cover;
  filter:sepia(0.08) contrast(1.03) saturate(0.95) brightness(0.98);
  border:2px solid rgba(0,0,0,0.08);
  box-shadow:0 6px 10px rgba(0,0,0,0.10);
}

/* Make QR Code less visually dominant: smaller border, subtle background and center it */
.homily .homily-qrcode{max-width:280px; margin-left:auto; margin-right:auto; transition:transform .28s ease, box-shadow .28s ease}

/* QR code animation: subtle float (translateY) + slight rotate + gentle scale.
   Single composed animation avoids transform conflicts and animates both
   position and rotation in one keyframes block. Also add fallback selectors
   so the rule matches the image even if class is missing. */
@media (prefers-reduced-motion: no-preference) {
  .homily .homily-qrcode,
  img.homily-qrcode,
  .homily-qrcode,
  img[src*="qrcode"]{
    animation: qrcode-float 6s ease-in-out infinite;
    will-change: transform, box-shadow;
  }

  @keyframes qrcode-float{
    0%{ transform: translateY(0) rotate(0deg) scale(1); box-shadow: 0 6px 12px rgba(0,0,0,0.12); }
    25%{ transform: translateY(-6px) rotate(0.6deg) scale(1.02); box-shadow: 0 12px 22px rgba(0,0,0,0.15), 0 0 14px 5px rgba(212,175,55,0.035); }
    50%{ transform: translateY(-8px) rotate(0.9deg) scale(1.03); box-shadow: 0 18px 34px rgba(0,0,0,0.18), 0 0 26px 9px rgba(212,175,55,0.06); }
    75%{ transform: translateY(-6px) rotate(0.6deg) scale(1.02); box-shadow: 0 12px 22px rgba(0,0,0,0.15), 0 0 14px 5px rgba(212,175,55,0.035); }
    100%{ transform: translateY(0) rotate(0deg) scale(1); box-shadow: 0 6px 12px rgba(0,0,0,0.12); }
  }
}

/* Respect users who prefer reduced motion: no animation, but keep hover affordance */
@media (prefers-reduced-motion: reduce){
  .homily .homily-qrcode{ animation: none !important; transform:none !important; }
}

/* Hover: ampliar levemente o QR code para dar ênfase (suave, performant) */
@media (prefers-reduced-motion: no-preference) {
  .homily .homily-qrcode{ transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease }
  .homily .homily-qrcode:hover{
    transform: scale(1.045);
    box-shadow: 0 18px 42px rgba(0,0,0,0.25), 0 0 36px 10px rgba(212,175,55,0.08);
    border-color: rgba(212,175,55,0.12);
  }
}

@media (prefers-reduced-motion: reduce){
  .homily .homily-qrcode:hover{ transform:none !important; box-shadow:0 6px 12px rgba(0,0,0,0.12); }
}

/* Hover animation: make QR image 'pop' subtly on hover.
   This pauses the continuous float and runs a short keyframe animation. */
@media (prefers-reduced-motion: no-preference) {
  .homily .homily-qrcode:hover,
  img[src$="qrcode.png"]:hover,
  img[src*="qrcode"]:hover{
    /* override continuous float animation and run hover animation */
    animation: qrcode-hover .6s cubic-bezier(.2,.9,.3,1) both;
  }

  @keyframes qrcode-hover{
    0%{ transform: translateY(0) rotate(0deg) scale(1); }
    40%{ transform: translateY(-6px) rotate(0.8deg) scale(1.08); }
    70%{ transform: translateY(-3px) rotate(0.4deg) scale(1.04); }
    100%{ transform: translateY(0) rotate(0.15deg) scale(1.03); }
  }
}

@media (prefers-reduced-motion: reduce) {
  img[src$="qrcode.png"]:hover, .homily .homily-qrcode:hover{ transform:none !important; animation:none !important; }
}

/* Keep the aside width intact but ensure internal spacing matches other cards */
.homily{padding:8px}

/* Accessibility: ensure links inside homily are visible on hover but discreet */
.homily a{color:var(--illum-text)}
.homily a:hover{color:var(--illum-gold)}

/* Estilo catálogo: ribbon, badges, estrelas, preço com desconto */
.products-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; margin-top:12px}
.product-card{position:relative; padding:12px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.03)); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.45); display:flex; flex-direction:column}
.product-card .ribbon{position:absolute; left:12px; top:12px; background:var(--accent); color:#fff; padding:6px 10px; font-weight:700; font-size:12px; border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,0.3)}
.product-card .tag{display:inline-block; background:rgba(0,0,0,0.06); color:var(--illum-gold); padding:6px 8px; border-radius:6px; font-weight:700; font-size:12px}
.product-card .stars{color:#f3c24b; margin-left:6px; font-weight:700}
.product-card .rating{display:flex; align-items:center; gap:8px; margin-top:6px}
.product-card .price-row{display:flex; align-items:center; gap:10px; margin-top:10px}
.product-card .price-row .current{font-weight:900; color:var(--illum-gold); font-size:18px}
.product-card .price-row .old{color:var(--muted); text-decoration:line-through; font-size:13px}
.product-card .discount-pill{background:rgba(52,169,85,0.12); color:#2aa84f; font-weight:800; padding:6px 8px; border-radius:999px; font-size:12px}
.product-card .meta{display:flex; justify-content:space-between; align-items:center; gap:10px}

@media(max-width:900px){
  .products-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px}
  .product-card img{height:140px}
}

/* ======== Visual improvements for cards (requested) ======== */
/* Apply dark background, subtle golden border, shadow, spacing, and typography tweaks */
.list-card{
  /* keep layout/sizes but increase inner spacing */
  padding:22px; /* slightly larger padding for 'respiro' */
  background:#161616; /* very dark grey background for contrast */
  border-radius:8px;
  border:1px solid rgba(212,175,55,0.12); /* subtle golden border */
  box-shadow:0 8px 18px rgba(0,0,0,0.30); /* soft shadow below cards */
  margin-bottom:18px; /* keep vertical rhythm */
  align-items:flex-start; /* ensure top alignment */
}

/* Remove white divider lines under cards from any previous rules */
.list-card[style], .list-card{border-bottom:none}

/* Keep image sizes unchanged but ensure they remain visually the same */
.list-card img{width:220px; height:130px; object-fit:cover; border-radius:6px}

/* Card body spacing (internal) */
.list-card .card-body{padding-left:8px}

/* Category/tag: reduced opacity for less emphasis */
.list-card .tag{opacity:0.72; color:#d4af37; font-weight:700}

/* Titles: stronger weight but same size */
.list-card h3, .list-card .card-body h3{font-weight:700; margin:8px 0}

/* Description: slightly less contrast */
.list-card p{color:rgba(255,255,255,0.78); margin:0}

/* Buttons: primary remains red (var(--accent)), secondary outlined becomes golden */
.list-card .card-actions .btn{margin-right:10px}
.list-card .card-actions .btn.outline{border-color:#d4af37;color:#d4af37;background:transparent}
.list-card .card-actions .btn.outline:hover{background:rgba(212,175,55,0.06)}

/* Make sure small meta text is a bit more muted */
.list-card .small, .list-card .meta{color:rgba(255,255,255,0.72)}

/* Responsive: keep spacing but reduce padding on small screens */
@media(max-width:900px){
  .list-card{padding:16px}
  .list-card img{height:200px;width:100%}
  .list-card .card-body{padding-left:0}
}

/* Ensure no extra bright borders from other rules interfere */
.list-card + .list-card{border-top:0}

/* End of visual improvements */

/* ======= Override / Final layout tweaks for cards and container ======= */
/* Ensure a single source of truth for spacing, grid width and card appearance */
.hero-inner{max-width:1300px !important}
.container{max-width:1300px !important; margin:24px auto !important; gap:20px !important; padding:0 18px !important}

/* Card layout: keep sizes but improve spacing, alignment and softness */
.list-card{
  display:flex !important;
  gap:18px !important;
  align-items:flex-start !important;
  padding:16px 16px !important;
  margin-bottom:12px !important; /* reduced vertical gap between cards */
  border-bottom:none !important;
  border-radius:8px !important;
  background: linear-gradient(180deg, #1f1f1f, #161616) !important; /* slightly less dark */
  border:1px solid rgba(212,175,55,0.06) !important; /* subtle golden edge */
  box-shadow:0 6px 12px rgba(0,0,0,0.14) !important; /* softer shadow */
}

.list-card img{width:220px; height:130px; object-fit:cover; border-radius:6px; flex-shrink:0}
.list-card .card-body{flex:1; display:flex; flex-direction:column; justify-content:flex-start}
.list-card .card-body .card-actions{margin-top:auto; display:flex; gap:10px}

/* Typography and contrast adjustments */
.list-card h3{font-weight:700; color:#f5f5f5}
.list-card p{color:rgba(255,255,255,0.86); line-height:1.6}
.list-card .tag{opacity:0.78; color:#c9a54a}
.list-card .small, .list-card .meta{color:rgba(255,255,255,0.72)}

/* Buttons: keep primary red, secondary gold */
.list-card .card-actions .btn{padding:8px 12px}
.list-card .card-actions .btn.outline{border-color:#d4af37;color:#d4af37;background:transparent}

/* Partitura indicator: golden shiny text with arrow pointing left */
.partitura-indicator{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:'EB Garamond', serif;
  font-weight:700;
  font-size:0.95rem;
  color:#d4af37;
  background:linear-gradient(135deg, #d4af37, #f4c542, #d4af37);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  text-shadow:0 0 8px rgba(212,175,55,0.4);
  letter-spacing:0.3px;
  margin-left:8px;
}

.partitura-indicator::before{
  content:"←";
  -webkit-text-fill-color:#d4af37;
  color:#d4af37;
  font-size:1.1rem;
  filter:drop-shadow(0 0 4px rgba(212,175,55,0.5));
}

/* Reduce heavy separators elsewhere that may affect the cards area */
.articles h2{margin-bottom:12px}

/* Ensure consistent lateral margins across pages */
main.container, .hero-inner, .products-grid{padding-left:18px; padding-right:18px}

/* Responsive rules: preserve sizes but stack neatly on narrow screens */
@media(max-width:900px){
  .container{padding:0 12px}
  .list-card{flex-direction:column; padding:14px}
  .list-card img{width:100%; height:200px}
  .list-card .card-body{padding-left:0}
}

/* subtle parchment texture hint (very light) to keep medieval-sacral aesthetic */
.list-card{background-image:linear-gradient(180deg, rgba(255,255,255,0.002), rgba(0,0,0,0.02)); background-blend-mode:overlay}

/* End overrides */

/* ======= Global refinement: grouping, spacing, palette consistency ======= */
/* Apply consistent spacing and lighter visual noise while preserving sizes */
main.container, .hero-inner, .products-grid{max-width:1300px; margin-left:auto; margin-right:auto}

/* unify content gap */
.container{gap:var(--content-gap); padding-left:18px; padding-right:18px}

/* gently separate major sections for better grouping */
.hero-banner{margin-bottom:22px}
.articles{padding:6px 0 0}
.homily{padding-top:6px}
.site-footer{padding-top:28px}

/* panels/cards: use panel bg and soft shadow, reduce noise from heavy gradients */
.list-card, .product-card{background:linear-gradient(180deg, var(--panel-contrast), var(--panel-bg)); box-shadow:var(--soft-shadow); border-radius:var(--card-radius); border:1px solid rgba(212,175,55,0.06)}

/* reduce overly bright borders or thin lines across layout */
header.site-header, .site-footer{border-color:rgba(255,255,255,0.03)}

/* icons: reduce drop-shadow intensity to keep lightness */
.icon-btn .icon-img{filter:brightness(1.02) contrast(1.02) saturate(0.98)}

/* typography contrast: keep sizes, improve legibility with line-height and color balance */
.list-card h3, .product-card h3{line-height:1.15}
.list-card p, .product-card p{line-height:1.6; color:rgba(255,255,255,0.88)}

/* buttons: primary red stays, secondary gold subtle fill on hover only */
.btn{box-shadow:0 6px 14px rgba(0,0,0,0.12)}
.btn.outline{border-color:rgba(212,175,55,0.18); color:var(--gold)}
.btn.outline:hover{background:rgba(212,175,55,0.06)}

/* reduce visual noise in carousel/hero (if present) */
.hero-banner .capa-superior{box-shadow:none; border-radius:8px}

/* gentle parchment hint for section headers (very subtle) */
.articles h2{background:linear-gradient(90deg, rgba(251,246,239,0.02), rgba(251,246,239,0)); padding:6px 8px; border-radius:6px}

/* ensure consistent lateral alignment inside main grid */
.container{padding-left:18px; padding-right:18px}

/* final responsive checks: keep same sizes but tidy spacing */
@media(max-width:900px){
  .container{gap:14px;padding-left:12px;padding-right:12px}
  .hero-inner{padding-left:12px;padding-right:12px}
}

/* End global refinement */

/* ===== Liturgical notice card (shared) ===== */
@import url('https://fonts.googleapis.com/css2?family=Cardo:ital,wght@0,400;0,700;1,400&family=Playfair+Display:wght@400;700&display=swap');

:root{--lit-gold:#D4AF37; --lit-text:#EDEDED; --lit-card-bg:rgba(6,6,6,0.94)}

body.liturgic{
  margin:0;
  font-family: Cardo, 'Playfair Display', serif;
  background:#fff1c1;
  color:var(--lit-text);
  background-image: radial-gradient(ellipse at center, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.06) 60%);
  background-blend-mode:multiply;
}

.page-wrap{min-height:calc(100vh - var(--header-height,48px)); display:flex; align-items:center; justify-content:center; padding:48px 16px}
.notice-card{width:100%; max-width:750px; background:transparent; border-radius:10px; padding:0; box-sizing:border-box; position:relative; text-align:center}
.notice-inner{background:var(--lit-card-bg); border-radius:10px; padding:48px; box-sizing:border-box; color:var(--lit-text); border:1px solid rgba(212,175,55,0.40); box-shadow: 0 18px 50px rgba(0,0,0,0.7), 0 6px 18px rgba(0,0,0,0.6) inset; position:relative; overflow:hidden}
.arabesco{display:block; width:100%; text-align:center; margin:6px 0}
.arabesco svg{width:220px; height:auto; opacity:0.92}
.icon{font-size:52px; color:var(--lit-gold); display:block; margin:0 auto 18px; line-height:1}
.title{font-family:'Playfair Display', 'Cardo', serif; color:var(--lit-gold); font-size:28px; margin:6px 0 6px}
.subtitle{font-family:'Cardo', serif; color:rgba(237,237,237,0.92); font-size:16px; margin-bottom:18px}
.message{color:var(--lit-text); font-size:17px; line-height:1.8; max-width:680px; margin:0 auto}
.message p{margin:12px 0}
.footer-note{margin-top:22px;color:rgba(237,237,237,0.78); font-size:0.98rem}
.notice-inner::before{content:''; position:absolute; inset:0; pointer-events:none; background-image: radial-gradient(ellipse at 10% 10%, rgba(212,175,55,0.02), transparent 12%), radial-gradient(ellipse at 90% 90%, rgba(212,175,55,0.01), transparent 12%); mix-blend-mode:overlay; opacity:0.9}

@media(max-width:680px){.notice-inner{padding:40px}.title{font-size:22px}.icon{font-size:44px}.arabesco svg{width:160px}}
@media(max-width:420px){.notice-inner{padding:36px}.title{font-size:20px}.icon{font-size:40px}.message{font-size:15px}}

/* end liturgical notice card */

/* ===== Highlight top two side-nav items and improve scroll behavior ===== */
@media(min-width:901px){
  /* Emphasize Início and Formações (first two items) to increase prominence */
  .side-nav li:nth-of-type(1) > a,
  .side-nav li:nth-of-type(2) > a{
    font-size:15px;
    font-weight:800;
    letter-spacing:1.5px;
    color:var(--illum-gold);
    text-shadow:0 2px 8px rgba(198,138,20,0.08);
  }

  /* Slightly thicker underline for emphasized items */
  .side-nav li:nth-of-type(1) > a::after,
  .side-nav li:nth-of-type(2) > a::after{
    bottom:-6px;
    height:4px;
  }

  /* Ensure the nav list is scrollable but with comfortable padding at the bottom */
  .side-nav ul{padding-bottom:28px}

  /* Move only the second menu item (Formações) slightly up so it
     appears closer to the top while keeping Início visible. */
  .side-nav > ul > li:nth-of-type(2){
    transform: translateY(-12px);
  }
}

/* ===== Aplicar efeitos aos subitens litúrgicos específicos ===== */
@media(min-width:901px){
  .side-nav a[href^="pages/advento-"],
  .side-nav a[href^="pages/quaresma-"],
  .side-nav a[href^="pages/pascoa-"],
  .side-nav a[href^="pages/tempo-comum-"],
  .side-nav a[href^="pages/natal-"],
  .side-nav a[href$="kyrie.html"],
  .side-nav a[href$="gloria.html"],
  .side-nav a[href$="sanctus.html"],
  .side-nav a[href$="agnus-dei.html"],
  .side-nav a[href$="pater-noster.html"],
  .side-nav a[href$="ad-libitum.html"]{
    font-family: 'EB Garamond', serif; /* mesma fonte */
    font-size:15px; /* tamanho igual aos rótulos */
    font-weight:600;
    letter-spacing:0.6px;
    color:rgba(255,255,255,0.96);
    position:relative;
    transition: letter-spacing .25s ease, transform .25s ease, color .18s ease;
  }

  /* Re-ativar pseudo-elemento de underline dourado especificamente para estes links */
  .side-nav a[href^="pages/advento-"]::after,
  .side-nav a[href^="pages/quaresma-"]::after,
  .side-nav a[href^="pages/pascoa-"]::after,
  .side-nav a[href^="pages/tempo-comum-"]::after,
  .side-nav a[href^="pages/natal-"]::after,
  .side-nav a[href$="kyrie.html"]::after,
  .side-nav a[href$="gloria.html"]::after,
  .side-nav a[href$="sanctus.html"]::after,
  .side-nav a[href$="agnus-dei.html"]::after,
  .side-nav a[href$="pater-noster.html"]::after,
  .side-nav a[href$="ad-libitum.html"]::after{
    display:block !important;
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, rgba(200,163,78,0.0) 0%, #c8a34e 40%, #d9b46a 100%);
    transform-origin: left center;
    transform: scaleX(0);
    opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
    border-radius:2px;
  }

  .side-nav a[href^="pages/advento-"]:hover,
  .side-nav a[href^="pages/quaresma-"]:hover,
  .side-nav a[href^="pages/pascoa-"]:hover,
  .side-nav a[href^="pages/tempo-comum-"]:hover,
  .side-nav a[href^="pages/natal-"]:hover,
  .side-nav a[href$="kyrie.html"]:hover,
  .side-nav a[href$="gloria.html"]:hover,
  .side-nav a[href$="sanctus.html"]:hover,
  .side-nav a[href$="agnus-dei.html"]:hover,
  .side-nav a[href$="pater-noster.html"]:hover,
  .side-nav a[href$="ad-libitum.html"]:hover{
    letter-spacing: calc(1px + 0.5px);
    transform: translateY(-2px);
    text-shadow: 0 1px 4px rgba(217,180,106,0.12);
    color:var(--text);
  }

  .side-nav a[href^="pages/advento-"]:hover::after,
  .side-nav a[href^="pages/quaresma-"]:hover::after,
  .side-nav a[href^="pages/pascoa-"]:hover::after,
  .side-nav a[href^="pages/tempo-comum-"]:hover::after,
  .side-nav a[href^="pages/natal-"]:hover::after,
  .side-nav a[href$="kyrie.html"]:hover::after,
  .side-nav a[href$="gloria.html"]:hover::after,
  .side-nav a[href$="sanctus.html"]:hover::after,
  .side-nav a[href$="agnus-dei.html"]:hover::after,
  .side-nav a[href$="pater-noster.html"]:hover::after,
  .side-nav a[href$="ad-libitum.html"]:hover::after{
    transform: scaleX(1);
    opacity: 1;
  }
}

/* ===== Brilho dourado discreto ao passar o mouse nas summaries litúrgicas ===== */
@media (prefers-reduced-motion: no-preference) {
  .side-nav details summary.advento:hover,
  .side-nav details summary.natal:hover,
  .side-nav details summary.quaresma:hover,
  .side-nav details summary.pascoa:hover,
  .side-nav details summary.tempo-comum:hover,
  .side-nav details summary.ordinario:hover,
  body.nav-open .side-nav details summary.advento:hover,
  body.nav-open .side-nav details summary.natal:hover,
  body.nav-open .side-nav details summary.quaresma:hover,
  body.nav-open .side-nav details summary.pascoa:hover,
  body.nav-open .side-nav details summary.tempo-comum:hover,
  body.nav-open .side-nav details summary.ordinario:hover{
    text-shadow: 0 2px 8px rgba(201,162,39,0.35), 0 6px 22px rgba(201,162,39,0.12);
    filter: drop-shadow(0 8px 18px rgba(201,162,39,0.08));
  }
}

/* Fallback para usuários que preferem reduzir movimentos: aplicar sombra de texto mais simples */
@media (prefers-reduced-motion: reduce) {
  .side-nav details summary.advento:hover,
  .side-nav details summary.natal:hover,
  .side-nav details summary.quaresma:hover,
  .side-nav details summary.pascoa:hover,
  .side-nav details summary.tempo-comum:hover,
  .side-nav details summary.ordinario:hover,
  body.nav-open .side-nav details summary.advento:hover,
  body.nav-open .side-nav details summary.natal:hover,
  body.nav-open .side-nav details summary.quaresma:hover,
  body.nav-open .side-nav details summary.pascoa:hover,
  body.nav-open .side-nav details summary.tempo-comum:hover,
  body.nav-open .side-nav details summary.ordinario:hover{
    text-shadow: 0 1px 4px rgba(201,162,39,0.28);
    filter: none;
  }
}

/* Brilho dourado no hover para os tópicos principais do menu */
.side-nav details summary.advento:hover,
.side-nav details summary.natal:hover,
.side-nav details summary.quaresma:hover,
.side-nav details summary.pascoa:hover,
.side-nav details summary.tempo-comum:hover,
.side-nav details summary.ordinario:hover,
body.nav-open .side-nav details summary.advento:hover,
body.nav-open .side-nav details summary.natal:hover,
body.nav-open .side-nav details summary.quaresma:hover,
body.nav-open .side-nav details summary.pascoa:hover,
body.nav-open .side-nav details summary.tempo-comum:hover,
body.nav-open .side-nav details summary.ordinario:hover {
  color: var(--illum-gold) !important;
  text-shadow: 0 2px 12px rgba(201,162,39,0.6);
  filter: drop-shadow(0 8px 18px rgba(201,162,39,0.12));
  transition: color .18s ease, text-shadow .22s ease, filter .22s ease;
}

/* ===== Ajuste específico: itens do Advento no menu lateral ======
   Cor clara, tamanho 15px e fonte EB Garamond conforme solicitado */
.side-nav a[href$="advento-1.html"],
.side-nav a[href$="advento-2.html"],
.side-nav a[href$="advento-3.html"],
.side-nav a[href$="advento-4.html"]{
  color: #fff1c0 !important;
  font-size: 15px !important;
  font-family: 'EB Garamond', serif !important;
  font-weight:600 !important;
}

body.nav-open .side-nav a[href$="advento-1.html"],
body.nav-open .side-nav a[href$="advento-2.html"],
body.nav-open .side-nav a[href$="advento-3.html"],
body.nav-open .side-nav a[href$="advento-4.html"]{
  color: #fff1c0 !important;
}

/* ========== Mobile Optimization (não afeta desktop) ========== */
@media(max-width: 768px){
  /* Header menor e mais compacto */
  .site-header{
    padding: 8px 12px;
    height: 56px;
  }
  
  body{
    padding-top: 56px;
  }
  
  /* Logo menor */
  .logo img{
    height: 36px;
  }
  
  /* Ícones do header menores */
  .header-actions .icon-img{
    width: 20px;
    height: 20px;
  }
  
  .header-actions .icon-label{
    font-size: 0.7rem;
  }
  
  /* Search box menor */
  #search{
    width: 100px;
    font-size: 0.85rem;
    padding: 4px 8px;
  }
  
  /* Cards da página inicial menores */
  .list-card{
    padding: 12px;
    margin-bottom: 12px;
  }
  
  .list-card img{
    width: 100%;
    height: 160px;
    margin-bottom: 10px;
  }
  
  .list-card h3{
    font-size: 1.1rem;
    margin: 8px 0;
  }
  
  .list-card p{
    font-size: 0.9rem;
    line-height: 1.5;
  }
  
  .list-card .tag{
    font-size: 0.75rem;
  }
  
  /* Botões menores */
  .btn, .list-card .card-actions .btn{
    padding: 8px 14px;
    font-size: 0.85rem;
  }
  
  /* Banner hero menor */
  .hero-banner{
    height: 180px;
  }
  
  .hero-banner img{
    height: 180px;
  }
  
  /* Container com menos padding */
  .container{
    padding: 12px;
    gap: 16px;
  }
  
  /* Títulos menores */
  h1{
    font-size: 1.6rem;
  }
  
  h2{
    font-size: 1.4rem;
  }
  
  h3{
    font-size: 1.2rem;
  }
  
  /* Side nav ajustado */
  .side-nav{
    width: 85%;
    max-width: 300px;
  }
  
  .side-nav-hero img{
    height: 140px;
  }
  
  /* Homily/aside menor */
  .homily{
    padding: 12px;
  }
  
  .homily img, .video-card img{
    max-height: 180px;
  }
  
  /* Footer compacto */
  .site-footer{
    padding: 12px;
    font-size: 0.85rem;
  }
  
  /* Card de contato responsivo */
  main.container > section{
    padding: 40px 24px 30px !important;
  }
  
  main.container > section h1{
    font-size: 1.5rem !important;
  }
  
  main.container > section p{
    font-size: 0.95rem !important;
  }
}

@media(max-width: 480px){
  /* Ajustes extras para celulares muito pequenos */
  .site-header{
    padding: 6px 10px;
  }
  
  .logo img{
    height: 32px;
  }
  
  #search{
    width: 80px;
    font-size: 0.8rem;
  }
  
  .list-card h3{
    font-size: 1rem;
  }
  
  .list-card p{
    font-size: 0.85rem;
  }
  
  .btn{
    padding: 6px 12px;
    font-size: 0.8rem;
  }
  
  h1{
    font-size: 1.4rem;
  }
  
  h2{
    font-size: 1.2rem;
  }
  
  main.container > section{
    padding: 30px 18px 24px !important;
  }
}