/* Palette definitions */
:root {
  --primary-color: #2B4593;
  --complementary-color: #947A2B;
  --analogous-color1: #452B94;
  --analogous-color2: #2B7A94;
}

/* Navigation and footer links */
header nav a,
header nav a:hover,
footer nav a,
footer nav a:hover {
  color: var(--primary-color);
}

/* General links */
a {
  color: var(--primary-color);
  text-decoration: underline;
}
a:hover {
  text-decoration: none;
}

/* Buttons & cards */
button, .card {
  background: var(--primary-color);
  color: #fff;
  border: none;
  border-left: 4px solid var(--analogous-color1);
  border-radius: 4px;
  overflow: hidden;
  display: inline-block;
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}
.card:hover {
  opacity: 0.9;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

/* Custom styles for YouTube cards – override default card appearance */
.youtube-card {
  background: #fff;
  color: #212529;
  border: 1px solid #dee2e6;
  border-left: 0 !important;
  border-radius: 0.25rem;
}
.youtube-card .card-title {
  color: inherit;
}
.youtube-card .card-img-top {
  width: 100%;
  height: auto;
  max-height: 200px;
}

/* Hover accent using complementary color */
a:hover, button:hover {
  border-color: var(--complementary-color);
}

/* Call-to-action button */
.cta {
  background: var(--complementary-color);
  color: #fff;
}

/* Section highlight */
section.highlight {
  background: var(--analogous-color2);
}

/* Header banner style */
.site-title a {
  display: block;
  width: 100%;
  padding: .4rem 0;
  background: var(--primary-color);
  color: #fff;
  border-radius: .3rem;
  text-decoration: none;
  text-align: center;
}
.site-title a:hover {
  filter: brightness(0.9);
}

/* Header/Footer subtle tint */
header, footer {
  background: rgba(43, 69, 147, 0.05);
}

/* Card styles (for youtube-card and generic card) */
/* Container */
.container{max-width:860px;margin:0 auto;padding:0 1rem;}
.card {
  margin: 1rem;
}
.card img {
  width: 100%;
  height: auto;
}
.card-body {
  padding: 0.5rem;
}
.youtube-card img {
  /* optional: keep the YouTube thumbnail size */
}

/* Responsive tweaks */
/* Headings color */
h1,h2,h3,h4,h5,h6{color:var(--primary-color);}
.main-nav a{display:inline-block;margin-right:1rem;}
@media (max-width: 600px) {
  .card {
    margin: 0.5rem;
  }
  
}
header .container {
  max-width: none;
  width: 100%;
  padding: 0;
}