/* ================== Fonts ================== */
@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/Inter-ExtraLight.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/Inter-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ================== Theme variables ================== */
:root{
  --bg:#f7f4ef;
  --fg:#1a1a1a;
  --muted:#5a5a5a;
  --card:#ffffff;
  --rubrica:#b5161b;
  --border:rgba(0,0,0,.08);

  /* link (tema chiaro) */
  --link-color:#1a5cff;

  --font:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --base:18px;
}

:root[data-theme="dark"],
html[data-theme="dark"]{
  --bg:#1f2328;
  --fg:#f2f3f5;
  --muted:#c6c8cc;
  --card:#262b31;
  --rubrica:#d05a5a;
  --border:rgba(255,255,255,.10);

  /* link (tema scuro) */
  --link-color:#6fa8ff;
}

/* ================== Base ================== */
*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:var(--font);
  font-weight:300;
  line-height:1.55;
  background:var(--bg);
  color:var(--fg);
  font-size:var(--base);
}

/* Link (leggibili anche in dark) */
a{
  color:var(--link-color);
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
}
a:visited{ color:var(--link-color); }

/* ================== Header ================== */
.topbar{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  justify-content:space-between;
  gap:12px;

  padding:12px 14px;
  padding-top: calc(12px + env(safe-area-inset-top));

  background:var(--bg);
  border-bottom:1px solid var(--border);
}

.brand{
  display:flex;
  gap:10px;
  align-items:center;
  min-width:0;
}

.logo{
  height:42px;
  width:auto;
  object-fit:contain;
}

.titles{ min-width:0; }

.appname{
  font-weight:600;
  font-size:1.02rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.subtitle{
  color:var(--muted);
  font-size:.92rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.controls{
  display:flex;
  gap:8px;
  align-items:center;
}

/* ================== Buttons & Tabs ================== */
.btn{
  border:1px solid var(--border);
  background:var(--card);
  color:var(--fg);
  padding:8px 10px;
  border-radius:10px;
  font-weight:600;
  line-height:1;
}

.tabs{
  display:flex;
  gap:8px;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  background:var(--bg);
}

.tab{
  flex:1;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--fg);
  padding:10px 12px;
  border-radius:12px;
  font-weight:700;
}

.tab.active{
  outline:2px solid rgba(181,22,27,.25);
}

/* ---- Back to top button ---- */
#pf-back-to-top{
  position: fixed;

  right: 18px;
  left: auto;
  inset-inline-start: auto;

  bottom: calc(18px + env(safe-area-inset-bottom));
  width: 56px;
  height: 56px;

  border: 0;
  border-radius: 999px;
  cursor: pointer;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 24px;
  line-height: 1;

  background: rgba(0,0,0,0.45);
  color: #fff;

  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}

#pf-back-to-top.is-visible{
  opacity: .85;
  pointer-events: auto;
  transform: translateY(0);
}

#pf-back-to-top:active{
  transform: translateY(1px);
}

/* Accessibilità: se l’utente preferisce meno animazioni */
@media (prefers-reduced-motion: reduce){
  #pf-back-to-top{ transition: none; }
}

/* ================== Layout ================== */
.app{
  padding:14px 14px 32px;
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  margin:12px 0;
}

.h1{
  font-size:1.25rem;
  font-weight:500;
  margin:0 0 4px 0;
}

.h2{
  font-size:1.05rem;
  font-weight:600;
  margin:1em 0 0.3em;
}

.small{
  color:var(--muted);
  font-size:.95rem;
}

hr{
  border:0;
  border-top:1px solid var(--border);
  margin:14px 0;
}

/* ================== Lists (Calendar) ================== */
.list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.item{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  padding:12px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;

  cursor:pointer;
}

.item:active{
  transform:scale(0.99);
}

.item .left{ min-width:0; }

.item .title{
  font-weight:500;
  margin:0;
  line-height:1.3;
}

/* ================== Liturgia ================== */
.rubrica{
  color: var(--rubrica);
  font-style: normal;   /* non corsivo */
  font-weight: 300;
  font-size: 0.95em;    /* -5% */
  margin-top: 1em;
  margin-bottom: 0.1em;
}

/* Link "Vai al Comune..." */
a.open-event {
  color: var(--rubrica);     /* stesso rosso delle rubriche */
  font-style: italic;       /* corsivo */
  font-weight: 200;
  text-decoration: none;    /* niente underline */
  display: inline-block;    /* rende pulito l'hover */
  margin-bottom: 0.4em;
}

/* underline SOLO al passaggio del mouse */
a.open-event:hover {
  text-decoration: underline;
}

a.open-doc {
  color: var(--rubrica, #b30000);
  font-style: italic;
  font-weight: 200;   /* opzionale */
  text-decoration: none;
}
a.open-doc:hover { text-decoration: underline; }

.didascalia{
  color:var(--muted);
  font-style:italic;
  font-weight:300;
  margin:0.25em 0 0.6em;
}

.lit-sign{
  color:var(--rubrica);
  font-weight:300;
}

/* R. / V. */
.rv{
  display:block;
  margin:0;
  padding:0;
}
.rv + .rv{
  margin-top:0; /* nessuno spazio tra V. e R. consecutivi */
}

/* Mantieni paragrafi: br/br = piccolo “respiro” */
.content br + br{
  display:block;
  content:"";
  margin-top:0.25em;
}

/* Se dopo una rubrica ci sono br inutili */
.rubrica + br{ display:none; }
.rubrica + br + br{ display:none; }

/* Inno / responsorio / salmi */
.inno{
  color:var(--fg);
  font-style:normal;
  margin:0.6em 0 0.9em;
  padding-left:0.5em;
}

.resp{
  color:var(--fg);
  font-style:normal;
  font-weight:400;
}

/* versi + strofe inni */
.inno-line{
  line-height:1.55;
}
.inno-gap{
  height:0.45em;   /* spazio tra strofe */
}

.salmo{ margin:.35em 0; }
.salmo-verse{ line-height:1.55; }
.salmo-verse.indent{ padding-left:1.6em; }
.salmo-gap{ height:.45em; }

/* dopo un salmo: elimina i <br> “automatici” che creano troppo vuoto */
.salmo + br { display:none; }
.salmo + br + br { display:none; }

/* Grassetti nel contenuto */
.content b,
.content strong { font-weight:500; }

html[data-theme="dark"] .content b,
html[data-theme="dark"] .content strong { font-weight:600; }

/* ================== Mobile: controlli topbar sotto il titolo e più piccoli ================== */
@media (max-width: 420px){
  .topbar{
    flex-wrap:wrap;
    align-items:flex-start;
    gap:10px;

    padding:10px 12px;
    padding-top: calc(10px + env(safe-area-inset-top));
  }

  .brand{ flex:1 1 100%; min-width:0; }

  .controls{
    flex:1 1 100%;
    display:flex;
    justify-content:flex-end;
    gap:6px;
  }

  .topbar .controls .btn{
    padding:5px 7px;
    min-width:36px;
    height:32px;
    line-height:1;
    font-size:0.92rem;
    border-radius:10px;
    font-weight:600;
  }

  #toggleTheme{ min-width:44px; }

  .appname{ font-size:0.98rem; }
  .subtitle{ font-size:0.90rem; }
}
/* Compensa l'header fisso quando si va a un'ancora */
.anchor {
  scroll-margin-top: 96px;
}
.center {
  text-align: center;
}
.notes {
  font-size: 0.85em;
  line-height: 1.45;
  color: #444; /* leggermente più morbido del testo principale */
}