/* AITunes Synthwave — Cassiopeia child template override */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Outfit:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Synthwave palette */
  --sw-bg: #0a0a12;
  --sw-bg2: #0f0f1a;
  --sw-surface: #151525;
  --sw-surface2: #1a1a30;
  --sw-border: #2a2a45;
  --sw-accent: #b537f2;
  --sw-accent-hover: #c95ff7;
  --sw-accent-glow: rgba(181,55,242,.25);
  --sw-pink: #f472b6;
  --sw-cyan: #22d3ee;
  --sw-text: #e8e8f0;
  --sw-text2: #c0c0d0;
  --sw-muted: #7a7a9a;

  /* Override Cassiopeia custom properties */
  --cassiopeia-color-primary: var(--sw-accent);
  --cassiopeia-color-link: var(--sw-accent);
  --cassiopeia-color-hover: var(--sw-accent-hover);
}

/* ─── Base ─────────────────────────────────────────────── */

body {
  background: var(--sw-bg) !important;
  color: var(--sw-text) !important;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ─── Header / Navigation ──────────────────────────────── */

.container-header,
header {
  background: var(--sw-bg2) !important;
  border-bottom: 1px solid var(--sw-border) !important;
}

.container-header a,
.mod-menu a,
.navbar-brand {
  color: var(--sw-text) !important;
  text-decoration: none;
  font-family: 'Outfit', sans-serif;
  transition: color .15s;
}

.mod-menu a:hover,
.container-header a:hover {
  color: var(--sw-accent) !important;
}

.mod-menu .active > a {
  color: var(--sw-accent) !important;
}

.page-header .page-title,
.page-header h1 {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sw-text) !important;
}

/* Site title / brand */
.site-title {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--sw-text) !important;
}

.site-description {
  color: var(--sw-muted) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: .7rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ─── Content Area ─────────────────────────────────────── */

.container-component,
.container-main,
main {
  background: transparent !important;
}

/* Article cards in blog list */
.com-content-category-blog .items-row,
.com-content-category-blog .item {
  background: var(--sw-surface) !important;
  border: 1px solid var(--sw-border);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 20px;
  transition: border-color .2s;
}

.com-content-category-blog .item:hover {
  border-color: var(--sw-accent);
}

/* Article page */
.com-content-article {
  background: var(--sw-surface);
  border: 1px solid var(--sw-border);
  border-radius: 8px;
  padding: 32px;
}

/* ─── Typography ───────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800;
  color: var(--sw-text) !important;
  letter-spacing: 1px;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.4rem; color: var(--sw-accent) !important; }
h3 { font-size: 1.1rem; }

p, li, td, th, dd, dt {
  color: var(--sw-text2) !important;
}

a {
  color: var(--sw-accent) !important;
  text-decoration: none;
  transition: color .15s;
}

a:hover {
  color: var(--sw-accent-hover) !important;
}

strong, b {
  color: var(--sw-text) !important;
}

blockquote {
  border-left: 3px solid var(--sw-accent) !important;
  background: var(--sw-surface2) !important;
  padding: 16px 20px;
  border-radius: 0 6px 6px 0;
  color: var(--sw-text2) !important;
  font-style: italic;
}

code, pre {
  font-family: 'JetBrains Mono', monospace !important;
  background: var(--sw-bg2) !important;
  color: var(--sw-cyan) !important;
  border-radius: 4px;
}

code { padding: 2px 6px; font-size: .85em; }
pre { padding: 16px; border: 1px solid var(--sw-border); overflow-x: auto; }

/* ─── Article Intro (matching ViewNorway pattern) ──────── */

.article-intro strong {
  color: var(--sw-text) !important;
  font-size: 1.1em;
}

/* ─── Lists ────────────────────────────────────────────── */

ul, ol {
  color: var(--sw-text2) !important;
}

ul li::marker {
  color: var(--sw-accent);
}

ol li::marker {
  color: var(--sw-pink);
}

/* ─── Buttons ──────────────────────────────────────────── */

.btn-primary,
.btn {
  background: var(--sw-accent) !important;
  border-color: var(--sw-accent) !important;
  color: #fff !important;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  border-radius: 6px;
  transition: all .15s;
}

.btn-primary:hover,
.btn:hover {
  background: var(--sw-accent-hover) !important;
  border-color: var(--sw-accent-hover) !important;
  box-shadow: 0 0 20px var(--sw-accent-glow);
}

/* ─── Pagination ───────────────────────────────────────── */

.pagination {
  gap: 4px;
}

.page-link {
  background: var(--sw-surface) !important;
  border-color: var(--sw-border) !important;
  color: var(--sw-text2) !important;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .8rem;
}

.page-link:hover {
  background: var(--sw-surface2) !important;
  color: var(--sw-accent) !important;
  border-color: var(--sw-accent) !important;
}

.page-item.active .page-link {
  background: var(--sw-accent) !important;
  border-color: var(--sw-accent) !important;
  color: #fff !important;
}

/* ─── Sidebar ──────────────────────────────────────────── */

.sidebar .moduletable {
  background: var(--sw-surface);
  border: 1px solid var(--sw-border);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
}

.sidebar .moduletable h3 {
  font-size: .75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sw-muted) !important;
  margin-bottom: 12px;
  font-family: 'JetBrains Mono', monospace !important;
}

/* ─── Footer ───────────────────────────────────────────── */

.container-footer,
footer {
  background: var(--sw-bg2) !important;
  border-top: 1px solid var(--sw-border) !important;
  color: var(--sw-muted) !important;
}

footer a {
  color: var(--sw-muted) !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  letter-spacing: .5px;
}

footer a:hover {
  color: var(--sw-accent) !important;
}

/* ─── Breadcrumbs ──────────────────────────────────────── */

.mod-breadcrumbs {
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  letter-spacing: .5px;
  color: var(--sw-muted) !important;
}

.mod-breadcrumbs a {
  color: var(--sw-muted) !important;
}

.mod-breadcrumbs a:hover {
  color: var(--sw-accent) !important;
}

/* ─── Tags ─────────────────────────────────────────────── */

.tags .tag-list span,
.tags .badge {
  background: var(--sw-surface2) !important;
  color: var(--sw-pink) !important;
  border: 1px solid var(--sw-border);
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem;
  letter-spacing: .5px;
  padding: 3px 8px;
}

/* ─── Article metadata ─────────────────────────────────── */

.article-info,
.com-content-article .article-info {
  color: var(--sw-muted) !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  letter-spacing: .3px;
  border-bottom: 1px solid var(--sw-border);
  padding-bottom: 12px;
  margin-bottom: 20px;
}

.article-info dd,
.article-info dt {
  color: var(--sw-muted) !important;
}

/* ─── Neon glow accents ────────────────────────────────── */

.page-header h1::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--sw-accent), var(--sw-pink));
  margin-top: 12px;
  border-radius: 2px;
}

/* Back to AITunes link */
.back-to-aitunes {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sw-muted) !important;
  border: 1px solid var(--sw-border);
  padding: 6px 14px;
  border-radius: 4px;
  text-decoration: none;
  transition: all .15s;
}

.back-to-aitunes:hover {
  border-color: var(--sw-accent);
  color: var(--sw-accent) !important;
}

/* ─── Scrollbar ────────────────────────────────────────── */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--sw-bg); }
::-webkit-scrollbar-thumb { background: var(--sw-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--sw-accent); }

/* ─── Selection ────────────────────────────────────────── */

::selection {
  background: var(--sw-accent);
  color: #fff;
}

/* ─── Responsive ───────────────────────────────────────── */

@media (max-width: 768px) {
  .com-content-article { padding: 20px; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.2rem; }
}