/* Visual da marca Casa & Coisas da Fran aplicado nas páginas do Mealie (injetado pelo Caddy) */
@view-transition { navigation: auto; }

.v-theme--light {
  --v-theme-background: 251, 243, 234;
  --v-theme-surface: 255, 255, 255;
  --v-theme-on-background: 74, 36, 24;
  --v-theme-on-surface: 74, 36, 24;
}
/* modo escuro em tom chocolate, também com as cores da logo */
.v-theme--dark {
  --v-theme-background: 42, 26, 20;
  --v-theme-surface: 56, 35, 27;
  --v-theme-surface-bright: 72, 46, 36;
  --v-theme-on-background: 251, 243, 234;
  --v-theme-on-surface: 251, 243, 234;
}
.v-theme--dark .v-application .v-card-title.text-h5, .v-theme--dark.v-application h2.text-h5,
.v-application.v-theme--dark .v-card-title.text-h5, .v-application.v-theme--dark h2.text-h5 { color: #E8A090; }

.v-application, .v-application .text-h5, .v-application .text-h6, .v-application .text-body-1, .v-application .text-body-2 {
  font-family: "Nunito", "Segoe UI", system-ui, sans-serif !important;
}

/* topo com logo e saudação */
.marca-topo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; min-width: 0; }
.marca-topo img { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); flex: none; }
.marca-topo b { display: block; font: 700 22px/1 "Dancing Script", cursive; white-space: nowrap; }
.marca-topo small { display: block; font: 600 12px/1.2 "Nunito", sans-serif; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-app-bar .v-toolbar-title { overflow: visible; }

/* títulos em letra cursiva, na cor terracota */
.v-application .v-card-title.text-h5, .v-application h2.text-h5 {
  font-family: "Dancing Script", cursive !important;
  font-weight: 700 !important; color: #B4584A; opacity: 1 !important;
}
.v-application .v-card-title.text-h5 { font-size: 2.1rem !important; line-height: 1.15 !important; text-wrap: balance; }
.v-application h2.text-h5 { font-size: 1.9rem !important; }

/* visitante: sem estrelas vazias */
html.visitante .v-rating { display: none !important; }
.serve-vazio { display: none !important; }

/* botões flutuantes: o que eu usei + início */
.marca-flutua {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 2000;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; gap: 8px; filter: drop-shadow(0 6px 16px rgba(74,36,24,.25));
}
.marca-flutua a {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none; white-space: nowrap;
  font: 800 15px "Nunito", sans-serif; border-radius: 99px; padding: 11px 18px;
}
.marca-flutua .usei { background: #B4584A; color: #fff; }
.marca-flutua .inicio { background: #fff; color: #4A2418; border: 1.5px solid #EBD8CC; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }