/*
Theme Name: Straat Recordz
Theme URI: https://straatrecordz.nl/
Author: Straat Recordz
Description: Responsive WordPress-thema gebaseerd op de Straat Recordz comeback-demo.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: straatrecordz
*/

:root {
  --red: #d40b13;
  --deep-red: #aa0008;
  --dark-red: #780006;
  --lime: #c7ff00;
  --ink: #111;
  --paper: #f1f2f4;
  --muted: #d9dde2;
  --line: rgba(255,255,255,.45);
  --shadow: 0 6px 18px rgba(0,0,0,.24);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #870008;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.35;
}

body.admin-bar .skip-link { top: 40px; }

img { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; }
button { cursor: pointer; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  transform: translateY(-160%);
  padding: 10px 14px;
  color: #fff;
  background: #000;
  border-radius: 5px;
}
.skip-link:focus { transform: translateY(0); }

.site-shell {
  width: min(1280px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  background: #b9000b;
  border-top: 24px solid #ba0710;
  box-shadow: 0 0 0 1px #4d0004, 0 0 30px rgba(0,0,0,.4);
}

.site-header {
  position: relative;
  min-height: 97px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 0 84px 0 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #1a1a1a, #070707);
  border-bottom: 2px solid #e60012;
}

.brand {
  position: relative;
  z-index: 3;
  flex: 0 0 490px;
  width: 490px;
  height: 99px;
}
.brand img { position: absolute; max-width: none; }
.brand-speakers { left: 0; top: 0; width: 89px; height: 99px; }
.brand-logo { left: 97px; top: 21px; width: 391px; height: 55px; }
.brand-edition { left: 390px; top: 65px; width: 85px; height: 10px; }

.header-stripes {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 690px;
  height: 98px;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.main-nav {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 54px;
}
.main-nav .menu-item { list-style: none; }
.main-nav .menu-item a { display: block; }
.main-nav a {
  min-width: 112px;
  padding: 12px 15px 13px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: 29px;
  letter-spacing: .2px;
  border-radius: 11px;
  border: 1px solid #c7c7c7;
  background: linear-gradient(#fafafa, #d9dde1 70%, #bfc4c8);
  box-shadow: 0 4px 0 rgba(0,0,0,.45);
  transition: transform .15s ease, filter .15s ease;
}
.main-nav a:hover, .main-nav a:focus-visible { transform: translateY(-2px); filter: brightness(1.05); }
.main-nav a.active {
  color: #fff;
  border-color: #d70d19;
  background: linear-gradient(#e31b26, #b9000c 70%, #990008);
}
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a {
  color: #fff;
  border-color: #d70d19;
  background: linear-gradient(#e31b26, #b9000c 70%, #990008);
}

.menu-toggle { display: none; }

.content-grid {
  display: grid;
  grid-template-columns: 285px minmax(0, 1fr) 315px;
  grid-template-areas:
    "news stories charts"
    "mixtapes videos tracks";
  align-items: stretch;
}

.panel { position: relative; min-width: 0; overflow: hidden; }
.panel h1, .panel h2 {
  margin: 0;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  letter-spacing: 1.4px;
  line-height: 1;
}
.panel h1 small, .panel h2 small {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  font-size: .46em;
  letter-spacing: 2px;
  color: #df0a17;
}

.latest-news {
  grid-area: news;
  min-height: 370px;
  padding: 7px 8px 66px 6px;
  background:
    linear-gradient(135deg, transparent 74%, #a7abb0 74.2% 74.6%, transparent 74.8%),
    linear-gradient(160deg, #f6f6f6 0 67%, #e3e5e8 67% 100%);
  border-right: 1px solid #a10008;
  overflow: visible;
  z-index: 4;
}
.latest-news h2, .mixtapes h2, .latest-tracks h2 {
  font-size: 35px;
  color: #050505;
  margin: 0 0 5px 8px;
}
.ticker-list { display: grid; gap: 0; }
.ticker-list a {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #e20916;
  font-size: 10.4px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.ticker-list a:hover { text-decoration: underline; }
.sponsor { margin-top: 5px; font-size: 10px; color: #777; }
.sponsor span { display: block; }
.sponsor strong { display: inline-block; padding: 1px 5px; color: #252525; background: #d7d7d7; box-shadow: inset 0 0 0 1px #aaa; }

.decor-model { position: absolute; pointer-events: none; user-select: none; }
.decor-model-one { z-index: 6; right: -8px; bottom: -19px; width: 153px; }

.stories {
  grid-area: stories;
  min-height: 370px;
  padding: 8px 14px 10px 22px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(160,0,7,.08), rgba(255,255,255,.05) 48%, rgba(80,0,3,.2)),
    repeating-linear-gradient(170deg, rgba(255,255,255,.025) 0 4px, rgba(0,0,0,.025) 4px 8px),
    linear-gradient(135deg, #f01a24, #c60813 48%, #ed1220);
  box-shadow: inset 0 0 40px rgba(0,0,0,.12);
}
.stories::before,
.videos::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background:
    radial-gradient(circle at 70% 16%, transparent 0 60px, #370005 61px 63px, transparent 64px),
    linear-gradient(25deg, transparent 42%, #3b0003 43% 44%, transparent 45%),
    linear-gradient(-10deg, transparent 55%, #fff 56% 56.5%, transparent 57%);
}
.stories > *, .videos > * { position: relative; z-index: 1; }
.stories h1 { font-size: 31px; margin: 0 0 5px; text-shadow: 0 2px 0 rgba(0,0,0,.18); }
.stories h1 small { color: var(--lime); }

.lead-story {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  gap: 7px;
  margin: 0 0 26px;
}
.lead-story img {
  width: 256px;
  height: 115px;
  object-fit: cover;
  border: 3px solid #f5f5f5;
  box-shadow: 0 1px 0 #7a0005;
}
.lead-story h3 { margin: 0 0 8px; color: var(--lime); font-size: 20px; line-height: 1.05; }
.lead-story h3 a { text-decoration: none; }
.lead-story h3 a:hover { text-decoration: underline; }
.lead-story p { margin: 0 0 7px; font-size: 10.8px; line-height: 1.25; }
.story-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin: -14px 0 0 2px;
}
.story-links div { display: grid; }
.story-links a { color: #fff; font-size: 10.5px; font-weight: 700; text-decoration: none; }
.story-links a:hover { text-decoration: underline; }
.story-meta { opacity: .82; font-size: 9px !important; }
.story-meta a { color: #fff; }
.read-more { font-weight: 800; }

.charts {
  grid-area: charts;
  min-height: 370px;
  padding-top: 13px;
  background: linear-gradient(145deg, #f3f4f5, #d7dade 62%, #f5f6f7);
}
.chart-heading { display: flex; align-items: center; gap: 8px; padding: 0 8px 8px; }
.chart-heading img { width: 75px; height: 61px; object-fit: cover; mix-blend-mode: multiply; }
.chart-heading h2 { font-size: 38px; }
.chart-heading h2 small { font-size: 15px; }
.chart-list {
  margin: 0;
  padding: 0;
  list-style-position: inside;
  counter-reset: ranking;
  font-family: Arial, Helvetica, sans-serif;
}
.chart-list li {
  counter-increment: ranking;
  display: flex;
  min-height: 27px;
  color: #fff;
  background: linear-gradient(90deg, #e21420, #dc0715 60%, #f03b44);
  border-bottom: 1px solid rgba(255,255,255,.38);
}
.chart-list li:nth-child(even) { background: linear-gradient(90deg, #f5f6f7, #d9dcdf); color: #111; }
.chart-list li::before {
  content: counter(ranking, decimal-leading-zero) ".";
  flex: 0 0 36px;
  padding: 3px 0 0 1px;
  text-align: right;
  font-size: 18px;
  font-weight: 900;
}
.chart-list button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 2px 8px 2px 5px;
  color: inherit;
  background: transparent;
  border: 0;
  font-size: 14px;
  font-weight: 900;
  text-align: left;
}
.chart-list button span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chart-list button i {
  flex: 0 0 18px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-left: 5px;
  color: #fff;
  font-style: normal;
  font-size: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7dd8ff, #087ad1 65%, #034c94);
  box-shadow: inset 0 0 0 1px #fff;
}
.chart-list button.is-playing i { background: radial-gradient(circle at 35% 30%, #ffdc73, #e55b00 70%); }

.mixtapes {
  grid-area: mixtapes;
  min-height: 483px;
  padding: 12px 21px 74px 37px;
  background: linear-gradient(145deg, #f1f2f4, #d7dbe0 70%, #b5bac0);
  border-right: 1px solid #a10008;
  overflow: visible;
  z-index: 3;
}
.cover-grid { display: grid; grid-template-columns: repeat(2, 103px); gap: 18px 21px; margin-top: 30px; }
.cover-grid a { position: relative; box-shadow: 0 1px 0 #000; }
.cover-grid a::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(0,0,0,.65); }
.cover-grid img { width: 103px; height: 102px; object-fit: cover; transition: transform .16s ease; }
.cover-grid a:hover img { transform: scale(1.04); }
.decor-model-two { z-index: 6; right: -80px; bottom: 0; width: 119px; }

.videos {
  grid-area: videos;
  min-height: 483px;
  padding: 13px 22px 16px 25px;
  color: #fff;
  background:
    radial-gradient(circle at 35% 115%, rgba(0,0,0,.24), transparent 45%),
    repeating-linear-gradient(170deg, rgba(255,255,255,.025) 0 4px, rgba(0,0,0,.025) 4px 8px),
    linear-gradient(150deg, #e31621, #bd000a 55%, #f31622);
}
.videos h2 { font-size: 35px; margin-bottom: 29px; }
.videos h2 small { color: #080808; }
.video-grid { display: grid; grid-template-columns: repeat(6, minmax(66px, 1fr)); gap: 19px 20px; }
.video-grid button,
.video-grid .video-item {
  min-width: 0;
  padding: 0;
  color: #fff;
  background: transparent;
  border: 0;
  text-align: center;
  text-decoration: none;
}
.video-grid img {
  width: 100%;
  aspect-ratio: 1 / .92;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 2px 0 rgba(0,0,0,.5);
  transition: transform .16s ease, filter .16s ease;
}
.video-grid button:hover img, .video-grid button:focus-visible img,
.video-grid .video-item:hover img, .video-grid .video-item:focus-visible img { transform: translateY(-3px); filter: brightness(1.12); }
.video-grid strong { display: block; margin-top: 3px; font-size: 14px; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.video-grid span { display: block; color: #080808; font-size: 12px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.video-placeholder, .story-placeholder, .cover-placeholder {
  display: grid;
  place-items: center;
  min-height: 90px;
  padding: 8px;
  color: #fff;
  background: #333;
  border: 3px solid #fff;
}
.cover-placeholder { width: 103px; height: 102px; font-size: 11px; text-align: center; }
.story-placeholder { width: 256px; height: 115px; }
.ad-banner {
  display: block;
  width: min(735px, calc(100% - 6px));
  margin: 42px auto 0;
  border: 3px solid #fff;
  box-shadow: var(--shadow);
}
.ad-banner img { width: 100%; height: 90px; object-fit: cover; }

.latest-tracks {
  grid-area: tracks;
  min-height: 483px;
  padding: 12px 10px 25px 17px;
  background:
    linear-gradient(155deg, transparent 58%, rgba(235,218,103,.55) 58.5% 65%, transparent 65.5%),
    linear-gradient(25deg, transparent 62%, rgba(255,255,255,.7) 62.5% 70%, transparent 70.5%),
    linear-gradient(145deg, #f2f3f4, #d5d9de 70%, #bcc2c8);
}
.latest-tracks ul { margin: 8px 0 0 11px; padding: 0; list-style: none; }
.latest-tracks li { margin: 0 0 4px; padding-left: 10px; font-size: 13.5px; font-weight: 800; line-height: 1.2; }
.latest-tracks li::before { content: "-"; margin-left: -10px; margin-right: 5px; color: #fff; }
.latest-tracks a { text-decoration: none; }
.latest-tracks a:hover { color: #c5000e; text-decoration: underline; }

.site-footer {
  min-height: 51px;
  display: grid;
  grid-template-columns: 285px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 5px 16px 5px 8px;
  color: #fff;
  background: linear-gradient(#e61520, #b90009);
  border-top: 2px solid #6e0005;
  font-size: 12px;
}
.agency-mark { font-weight: 900; line-height: .85; color: #fff2c5; text-shadow: 1px 1px 0 #900; }
.agency-mark span { font-size: 11px; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; }
.site-footer nav a { text-decoration: none; }
.site-footer nav a:not(:last-child)::after { content: " | "; margin: 0 4px; }
.site-footer nav a:hover { text-decoration: underline; }
.site-footer p { margin: 0; font-weight: 700; white-space: nowrap; }

.toast {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  max-width: min(90vw, 520px);
  padding: 11px 16px;
  color: #fff;
  background: rgba(15,15,15,.94);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 6px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Standaard WordPress-content buiten de speciale voorpagina. */
.wp-content-panel {
  min-height: 65vh;
  padding: 32px clamp(18px, 5vw, 72px);
  background: #f1f2f4;
}
.wp-content-panel article { max-width: 900px; margin: 0 auto 32px; }
.wp-content-panel h1, .wp-content-panel h2 { line-height: 1.1; }
.wp-content-panel a { color: var(--deep-red); }
.wp-content-panel .entry-meta { color: #666; font-size: 13px; }
.wp-content-panel .post-thumbnail img { width: 100%; height: auto; }
.pagination { max-width: 900px; margin: 24px auto; }
.archive-layout { max-width: none; }
.archive-header { max-width: 1100px; margin: 0 auto 28px; }
.archive-header h1 { margin-bottom: 5px; font-size: clamp(36px, 6vw, 64px); }
.post-card-grid, .external-news-grid, .artist-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1100px; margin: 0 auto; }
.section-wide { grid-column: 1 / -1; }
.post-card, .external-news article, .artist-card { padding: 18px; background: #fff; box-shadow: var(--shadow); }
.post-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.post-card h2, .artist-card h2 { margin: 8px 0; font-size: 24px; }
.external-news { max-width: 1100px; margin: 48px auto 0; }
.external-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.external-news h3 { margin: 6px 0; }
.artist-card ul { padding-left: 18px; }
.full-chart-list { max-width: 900px; margin: 0 auto; padding: 0; list-style: none; }
.full-chart-list li { display: flex; align-items: center; gap: 18px; padding: 14px; background: #fff; border-bottom: 1px solid #ddd; }
.full-chart-list li:nth-child(odd) { background: #e8e9eb; }
.full-chart-list img { width: 64px; height: 64px; object-fit: cover; }
.full-chart-list h2, .full-chart-list p { margin: 0; }
.chart-rank { flex: 0 0 46px; color: var(--red); font: 36px Impact, sans-serif; text-align: center; }
.chart-play { margin-left: auto; padding: 8px 12px; color: #fff !important; background: var(--red); text-decoration: none; }
@media (max-width: 800px) { .post-card-grid, .artist-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .post-card-grid, .external-news-grid, .artist-grid { grid-template-columns: 1fr; } .full-chart-list li { gap: 10px; } }

:focus-visible { outline: 3px solid #ffe23f; outline-offset: 2px; }

@media (max-width: 1120px) {
  .site-header { padding-right: 25px; }
  .main-nav { gap: 14px; }
  .main-nav a { min-width: 100px; font-size: 25px; }
  .content-grid { grid-template-columns: 255px minmax(0, 1fr) 290px; }
  .lead-story { grid-template-columns: 42% 1fr; }
  .lead-story img { width: 100%; }
  .video-grid { gap: 15px 12px; }
  .site-footer { grid-template-columns: 220px 1fr; }
  .site-footer p { grid-column: 1 / -1; text-align: center; }
}

@media (max-width: 900px) {
  .site-shell { border-top-width: 12px; }
  .site-header { min-height: 84px; padding: 0 14px; }
  .brand { flex-basis: 415px; width: 415px; height: 84px; }
  .brand-speakers { width: 76px; height: auto; }
  .brand-logo { left: 82px; top: 18px; width: 332px; height: auto; }
  .brand-edition { left: 331px; top: 55px; width: 72px; height: auto; }
  .header-stripes { right: -108px; width: 590px; height: auto; }
  .menu-toggle {
    position: relative;
    z-index: 10;
    display: grid;
    gap: 5px;
    width: 46px;
    padding: 10px;
    color: #fff;
    background: #c90714;
    border: 1px solid #f66;
    border-radius: 8px;
  }
  .menu-toggle span:not(.sr-only) { display: block; height: 3px; background: #fff; }
  .main-nav {
    position: absolute;
    z-index: 9;
    top: 76px;
    right: 12px;
    display: none;
    width: min(280px, calc(100vw - 24px));
    padding: 10px;
    gap: 8px;
    background: rgba(12,12,12,.98);
    border: 1px solid #555;
    box-shadow: var(--shadow);
  }
  .main-nav.open { display: grid; }
  .main-nav a { width: 100%; }
  .content-grid {
    grid-template-columns: minmax(0, 1fr) 330px;
    grid-template-areas:
      "stories charts"
      "news charts"
      "videos tracks"
      "mixtapes tracks";
  }
  .latest-news, .stories, .charts, .mixtapes, .videos, .latest-tracks { min-height: auto; }
  .decor-model { display: none; }
  .videos { padding-bottom: 24px; }
  .video-grid { grid-template-columns: repeat(3, 1fr); }
  .ad-banner { margin-top: 28px; }
}

@media (max-width: 680px) {
  .brand { flex-basis: 290px; width: 290px; height: 67px; }
  .brand-speakers { width: 57px; }
  .brand-logo { left: 62px; top: 15px; width: 225px; }
  .brand-edition { left: 205px; top: 41px; width: 63px; }
  .header-stripes { right: -250px; width: 520px; }
  .content-grid {
    display: flex;
    flex-direction: column;
  }
  .stories { order: 1; }
  .charts { order: 2; }
  .latest-news { order: 3; }
  .videos { order: 4; }
  .mixtapes { order: 5; }
  .latest-tracks { order: 6; }
  .lead-story { grid-template-columns: 1fr; margin-bottom: 22px; }
  .lead-story img { height: auto; aspect-ratio: 2.2 / 1; }
  .story-links { grid-template-columns: 1fr; gap: 8px; }
  .latest-news { padding-bottom: 30px; }
  .cover-grid { grid-template-columns: repeat(3, minmax(82px, 103px)); justify-content: center; }
  .mixtapes { padding-left: 18px; padding-right: 18px; }
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .ad-banner img { height: auto; }
  .site-footer { grid-template-columns: 1fr; text-align: center; padding: 12px; }
  .site-footer p { white-space: normal; }
}

@media (max-width: 390px) {
  .site-header { min-height: 72px; }
  .brand { flex-basis: 230px; width: 230px; height: 60px; }
  .brand-speakers { width: 48px; }
  .brand-logo { left: 52px; top: 14px; width: 177px; }
  .brand-edition { left: 159px; top: 35px; width: 54px; }
  .main-nav { top: 68px; }
  .stories { padding-left: 15px; padding-right: 15px; }
  .stories h1, .latest-news h2, .mixtapes h2, .videos h2, .latest-tracks h2 { font-size: 30px; }
  .cover-grid { grid-template-columns: repeat(2, 103px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}