/* Custom Ziggy MVC theme colors
   Based on the logo: purple (#7C6AEF) to pink (#E5578D) gradient
*/

:root {
  --ziggy-purple: #7C6AEF;
  --ziggy-purple-dark: #6356D4;
  --ziggy-pink: #E5578D;
  --ziggy-pink-light: #F06A9C;
  --ziggy-navy: #1A1A2E;
  --ziggy-gray: #6B7280;
}

/* Header with gradient matching the logo chevrons */
.page-header {
  background-color: var(--ziggy-purple);
  background-image: linear-gradient(135deg, var(--ziggy-purple) 0%, var(--ziggy-pink) 100%);
}

/* Logo in header */
.site-logo {
  max-width: 300px;
  height: auto;
  margin-bottom: 1rem;
  background-color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 42em) {
  .site-logo {
    max-width: 220px;
  }
}

@media screen and (max-width: 30em) {
  .site-logo {
    max-width: 180px;
  }
}

/* Navigation buttons */
.btn {
  color: rgba(255, 255, 255, 0.9);
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  border-style: solid;
  border-width: 1px;
  border-radius: 0.3rem;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}

.btn:hover {
  color: rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Links - use purple as primary accent */
.main-content a {
  color: var(--ziggy-purple);
}

.main-content a:hover {
  color: var(--ziggy-purple-dark);
}

/* Headings */
.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4,
.main-content h5,
.main-content h6 {
  color: var(--ziggy-navy);
}

/* Code blocks with subtle purple tint */
.main-content code {
  background-color: #f3f0ff;
  color: var(--ziggy-purple-dark);
}

.main-content pre {
  background-color: #f8f6ff;
  border: 1px solid #e8e4f8;
}

.main-content pre code {
  background-color: transparent;
  color: var(--ziggy-navy);
}

/* Tables */
.main-content table th {
  background-color: var(--ziggy-purple);
  color: white;
}

.main-content table td {
  border-color: #e8e4f8;
}

.main-content table tr:nth-child(odd) {
  background-color: #faf9ff;
}

/* Blockquotes with pink accent */
.main-content blockquote {
  border-left-color: var(--ziggy-pink);
  color: var(--ziggy-gray);
}

/* Footer */
.site-footer {
  border-top-color: #e8e4f8;
}

/* Theme color for mobile browsers */
meta[name="theme-color"] {
  content: var(--ziggy-purple);
}

/* Skip to content link */
#skip-to-content {
  background-color: var(--ziggy-purple);
}