/*-- Blog Post Styling (matching silviacanelon.com) --*/

/*-- Title Banner with Image Background --*/
#title-block-header.quarto-title-block {
  position: relative;
  background-size: cover !important;
  background-position: center !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}

/* The banner area - using box-shadow for overlay like silviacanelon.com */
.quarto-title-banner,
.quarto-title-banner.page-columns.page-full,
.quarto-title-block .quarto-title-banner,
#title-block-header .quarto-title-banner {
  background-size: cover !important;
  background-position: center !important;
  color: white !important;
  box-shadow: inset 0 0 0 1000px rgba(0, 38, 66, 0.75) !important;
  padding: 1rem 1.5rem !important;
}

/* White text on banner - title */
.quarto-title-banner h1.title,
.quarto-title-banner .title {
  color: #ffffff !important;
  font-family: "Petrona", Georgia, serif;
  font-size: 2.5rem;
  font-weight: 600;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  margin-bottom: 0.5rem;
  text-align: left;
}

/* Subtitle on banner */
.quarto-title-banner .subtitle,
.quarto-title-banner p.subtitle {
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 1.15rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  text-align: left;
}

/* Categories on banner */
.quarto-title-banner .quarto-categories {
  margin-top: 1rem;
  justify-content: flex-start;
}

.quarto-title-banner .quarto-category {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.quarto-title-banner .quarto-category:hover {
  background-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}

/*-- Metadata section - BELOW banner with regular background --*/
#title-block-header .quarto-title-meta {
  background-color: var(--bs-body-bg, #f5f5f4) !important;
  padding: 0.5rem 1.5rem !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  row-gap: 0.25rem;
}

/* Each metadata item container - stacked, equal width */
#title-block-header .quarto-title-meta > div {
  display: block !important;
  flex: 1 1 0;
  margin: 0 !important;
  padding: 0 !important;
}

/* Heading (Author, Published, etc.) */
#title-block-header .quarto-title-meta-heading {
  color: var(--bs-secondary-color, #706E6C) !important;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin: 0 0 0.1rem 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

/* Contents container */
#title-block-header .quarto-title-meta-contents {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}

/* Paragraphs inside contents */
#title-block-header .quarto-title-meta-contents p,
#title-block-header .quarto-title-meta p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  font-size: 0.9rem;
  color: var(--bs-body-color, #404040) !important;
}

#title-block-header .quarto-title-meta-contents a {
  color: var(--spc-link, #2c2857) !important;
}

#title-block-header .quarto-title-meta-contents a:hover {
  text-decoration: underline;
}

/* Remove space between banner and metadata */
#title-block-header .quarto-title-banner {
  margin-bottom: 0 !important;
}

#title-block-header.quarto-title-block {
  margin-bottom: 0 !important;
}

/*-- Dark mode adjustments --*/
[data-bs-theme="dark"] .quarto-title-banner {
  box-shadow: inset 0 0 0 1000px rgba(0, 15, 30, 0.8) !important;
}

[data-bs-theme="dark"] #title-block-header .quarto-title-meta {
  background-color: var(--bs-body-bg, #1a1a2e) !important;
}

/*-- Make navbar visible over banner images --*/
.navbar {
  background-color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.navbar .navbar-brand,
.navbar .navbar-title,
.navbar .nav-link,
.navbar .navbar-toggler-icon {
  color: #002642 !important;
}

.navbar .nav-link:hover {
  color: #A23E02 !important;
}

[data-bs-theme="dark"] .navbar {
  background-color: rgba(26, 26, 46, 0.95) !important;
}

[data-bs-theme="dark"] .navbar .navbar-brand,
[data-bs-theme="dark"] .navbar .navbar-title,
[data-bs-theme="dark"] .navbar .nav-link {
  color: #e8e8e8 !important;
}

[data-bs-theme="dark"] .navbar .nav-link:hover {
  color: #D96E34 !important;
}