/*
 * Bierwut – Cassiopeia child-template styling
 * Version 1.0.0
 * No remote fonts, scripts, trackers, or external assets.
 *
 * Install as: media/templates/site/cassiopeia_bierwut/css/user.css
 * (The exact child-template folder name may differ; check Joomla > System > Site Templates.)
 */

:root {
  --bw-bg: #090a0c;
  --bw-panel: #14171b;
  --bw-panel-2: #1b1f24;
  --bw-red: #d51f2a;
  --bw-red-dark: #9f111b;
  --bw-text: #f4f4f4;
  --bw-muted: #b8bec7;
  --bw-border: #343a42;
  --bw-max: 1240px;
  --cassiopeia-color-primary: #b81420;
  --cassiopeia-color-hover: #ed2935;
  --cassiopeia-color-link: #f04a53;
}

html { scroll-behavior: smooth; }
body {
  background: var(--bw-bg);
  color: var(--bw-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell,
               "Noto Sans", "Liberation Sans", Arial, sans-serif;
  line-height: 1.65;
}
h1, h2, h3, h4, h5, h6 {
  color: #fff;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Liberation Sans Narrow",
               system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: .035em;
  line-height: 1.15;
  text-transform: uppercase;
}
h1 { font-size: clamp(2.2rem, 5vw, 4.6rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.6rem); }
a { color: #ff5962; text-underline-offset: .18em; }
a:hover, a:focus { color: #fff; }
:focus-visible { outline: 3px solid #ff5962; outline-offset: 3px; }

.container-header {
  background: linear-gradient(115deg, #050506 0%, #17191d 55%, #39090e 100%);
  border-bottom: 3px solid var(--bw-red);
  box-shadow: 0 8px 30px #0009;
}
.container-header .navbar-brand,
.container-header .navbar-brand a {
  color: #fff;
  font-size: clamp(1.7rem, 4vw, 3.3rem);
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 var(--bw-red-dark);
}
.container-header .navbar-brand::after {
  content: "ROCK. BIER. LEIDENSCHAFT.";
  display: block;
  color: #d8d8d8;
  font-size: .27em;
  letter-spacing: .18em;
  font-weight: 700;
  text-shadow: none;
}
.container-header .mod-menu > li > a,
.container-header .navbar-nav > li > a {
  color: #f6f6f6;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .045em;
}
.container-header .mod-menu > li > a:hover,
.container-header .navbar-nav > li > a:hover,
.container-header .navbar-nav > li.active > a {
  color: #fff;
  background: var(--bw-red);
  border-radius: .2rem;
}

.container-component,
.container-sidebar-left,
.container-sidebar-right,
.site-grid {
  max-width: var(--bw-max);
}
.site-grid { padding-inline: clamp(.75rem, 2vw, 1.5rem); }
main, .com-content-article, .blog-item, .com-content-category-blog {
  color: var(--bw-text);
}
.com-content-article,
.blog-item,
.com-content-category-blog .item-content,
.moduletable,
.card {
  background: var(--bw-panel);
  border: 1px solid var(--bw-border);
  border-radius: .35rem;
  padding: clamp(1rem, 2.2vw, 1.8rem);
  box-shadow: 0 8px 24px #0005;
}
.page-header, .item-title, .page-header h1 {
  border-bottom: 2px solid var(--bw-red);
  padding-bottom: .5rem;
}
hr { border-color: var(--bw-border); opacity: 1; }

.btn, .btn-primary, button, input[type="submit"] {
  background: var(--bw-red);
  border: 1px solid var(--bw-red);
  border-radius: .2rem;
  color: white;
  font-weight: 800;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.btn:hover, .btn-primary:hover, button:hover, input[type="submit"]:hover {
  background: var(--bw-red-dark);
  border-color: #ff5962;
  color: #fff;
}
input:not([type="checkbox"]):not([type="radio"]),
textarea, select {
  background: #101317;
  border: 1px solid #454c55;
  color: #fff;
  border-radius: .2rem;
}
input:focus, textarea:focus, select:focus {
  border-color: #ff5962;
  box-shadow: 0 0 0 .2rem #d51f2a40;
}

img { max-width: 100%; height: auto; }
figure img, .item-image img, .com-content-category-blog img {
  border: 1px solid #41464e;
}
.bw-hero {
  padding: clamp(2.5rem, 8vw, 6rem) clamp(1rem, 5vw, 4rem);
  margin-block: 1rem 2rem;
  background:
    linear-gradient(90deg, #050506f2 0%, #090a0cce 56%, #5d0c13a6 100%),
    radial-gradient(ellipse at 80% 20%, #a91b25 0%, transparent 50%);
  border-left: 5px solid var(--bw-red);
  box-shadow: inset 0 0 0 1px #ffffff12;
}
.bw-hero p { max-width: 52rem; color: #e0e0e0; font-size: clamp(1rem, 2vw, 1.25rem); }
.bw-kicker {
  color: #ff5962;
  font-size: .85rem;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.bw-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1rem;
}
.bw-gallery a {
  display: block;
  background: var(--bw-panel);
  border: 1px solid var(--bw-border);
  padding: .45rem;
  color: white;
  text-decoration: none;
}
.bw-gallery img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.bw-gallery a:hover { border-color: var(--bw-red); transform: translateY(-2px); }
.bw-gallery span { display: block; padding: .5rem .25rem .2rem; font-weight: 800; }

footer, .container-footer {
  background: #050506;
  border-top: 2px solid var(--bw-red);
  color: var(--bw-muted);
}
footer a, .container-footer a { color: #ff5962; }

@media (max-width: 767px) {
  .site-grid { padding-inline: .75rem; }
  .container-header .navbar-brand::after { letter-spacing: .1em; }
  .com-content-article, .blog-item, .moduletable, .card { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}