/* ==============================================
   toastskagen.se – Oh Captain Color Theme Override
   Palette: #16537e, #fff9e7, #cfe2f3, #fffdf7, #9ebccf
   ============================================== */

/* --- Tailwind CSS variable overrides (used by app-CZ0j8Hpp.css) --- */
:root {
  --background: 45 100% 95%;
  --foreground: 207 50% 28%;
  --card: 45 100% 98%;
  --card-foreground: 207 50% 28%;
  --popover: 45 100% 98%;
  --popover-foreground: 207 50% 28%;
  --primary: 207 70% 29%;
  --primary-foreground: 45 100% 95%;
  --secondary: 203 33% 72%;
  --secondary-foreground: 207 50% 28%;
  --muted: 208 40% 94%;
  --muted-foreground: 207 25% 48%;
  --accent: 207 70% 29%;
  --accent-foreground: 45 100% 98%;
  --border: 208 30% 90%;
  --input: 208 30% 90%;
  --ring: 207 70% 29%;
}

/* Soften all borders globally */
.border-border { border-color: hsl(208 30% 90%) !important; }
.border-b { border-bottom-color: hsl(208 30% 90%); }
.border-t { border-top-color: hsl(208 30% 90%); }
.divide-border > * + * { border-color: hsl(208 30% 90%); }

/* --- style.css variable overrides (only non-conflicting names) --- */
:root {
  --bg:        #fff9e7;
  --bg-card:   #fffdf7;
  --text:      #16537e;
  --gold:      #16537e;
  --gold-dark: #0e3a5a;
}

/* --- Rating stars --- */
.recipe-rating {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0;
  flex-wrap: wrap;
}
.rating-stars {
  display: flex;
  gap: 2px;
  cursor: pointer;
}
.rating-stars .star {
  width: 28px;
  height: 28px;
  fill: #cfe2f3;
  transition: fill 0.15s, transform 0.15s;
  cursor: pointer;
}
.rating-stars .star:hover,
.rating-stars .star.hovered {
  transform: scale(1.15);
}
.rating-stars .star.filled {
  fill: #16537e;
}
.rating-stars .star.hovered {
  fill: #9ebccf;
}
.rating-stars.rated .star {
  cursor: default;
}
.rating-stars.rated .star:hover,
.rating-stars.rated .star.hovered {
  transform: none;
}
.rating-info {
  font-size: 0.85rem;
  color: #5a7d99;
}
.rating-info strong {
  color: #16537e;
}
.rating-thankyou {
  font-size: 0.85rem;
  color: #16537e;
  font-weight: 500;
}

/* --- Recipe action buttons --- */
.recipe-actions {
  display: flex;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  flex-wrap: wrap;
}
.recipe-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border: 1px solid #cfe2f3;
  border-radius: 6px;
  background: #fffdf7;
  color: #16537e;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  font-family: inherit;
}
.recipe-action-btn:hover {
  background: #cfe2f3;
  border-color: #9ebccf;
}
.recipe-action-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.copy-feedback {
  font-size: 0.8rem;
  color: #16537e;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.3s;
}
.copy-feedback.visible {
  opacity: 1;
}

/* --- Increase spacing in recipe step lists --- */
.space-y-6 > li { margin-bottom: 0.5rem; }
ol.space-y-6 { gap: 0.25rem; }

/* For style.css pages */
.steps li { padding: 1.25rem 0 1.25rem 3.5rem; }
.ingredient-list li { padding: 0.65rem 0; }

/* --- Print styles --- */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 12pt !important;
    line-height: 1.5 !important;
  }
  /* Hide non-recipe elements */
  header, footer, nav[aria-label="Brödsmulor"],
  .recipe-rating, .recipe-actions,
  .site-header, .site-footer, .breadcrumb,
  .print-btn, .portion-scaler, .btn,
  section.mx-auto, /* "Fler recept" section */
  .relative.h-64, .relative.h-96, /* hero image */
  .sticky, [class*="bg-primary text-primary"],
  .border-t.border-border.bg-primary {
    display: none !important;
  }
  /* Show recipe content cleanly */
  main, article, .rounded-xl {
    margin: 0 !important;
    padding: 0.5rem !important;
    border: none !important;
    box-shadow: none !important;
    background: #fff !important;
  }
  .container {
    max-width: 100% !important;
    padding: 0 !important;
  }
  .-mt-8 { margin-top: 0 !important; }
  h1 { font-size: 22pt !important; margin-bottom: 8pt !important; }
  h2 { font-size: 16pt !important; margin-bottom: 6pt !important; }
  .grid { display: block !important; }
  .grid > div { margin-bottom: 1rem !important; }
  ul li, ol li { break-inside: avoid; }
  a { color: #000 !important; text-decoration: none !important; }
  img { max-height: 200px !important; }
  /* Show recipe title for print */
  .print-title {
    display: block !important;
    font-size: 24pt;
    font-weight: bold;
    margin-bottom: 12pt;
    color: #000;
  }
}

/* --- Nav logo image --- */
.nav-logo-img {
  height: 2.75rem;
  width: auto;
}