/* ==========================================================
   RADIO ARTLAND — MASTER CSS (EN + DE)
   ========================================================== */

/* ========================
   0) CSS VARIABLES
   ======================== */
:root{
  --ra-bg: #f3f3f3;
  --ra-text: #121212;
  --ra-muted: #666666;
  --ra-card-bg: #ffffff;
  --ra-border: #e6e6e6;
  --ra-shadow: 0 8px 24px rgba(0,0,0,.08);
  --ra-radius: 10px;
  --site-max: 1200px;

  /* DEFAULT = EN */
  --ra-accent: #ff5e00;

  /* Typography */
  --ra-font-body: "Courier Prime", monospace;
  --ra-font-head: "Lato", sans-serif;

  /* Sticky player */
  --player-height: 144px;
  --player-gap: 10px;

  /* Layout */
  --nav-height-fallback: 88px;
  --cookie-height-fallback: 0px;
}

/* DE override */
.lang-de{
  --ra-accent: #b32025;
}

/* ========================
   1) GLOBAL BASE
   ======================== */
html, body, .elementor-page {
  background-color: var(--ra-bg) !important;
  color: var(--ra-text);
}

body{
  font-family: var(--ra-font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  padding-bottom: calc(var(--player-height) + var(--player-gap));
}

/* Headings */
h1, h2, h3, h4, h5, h6{
  font-family: var(--ra-font-head);
  line-height: 1.2;
  margin: 0 0 .5em;
  letter-spacing: 0.5px;
  font-weight: 700;
}

/* Text */
p, li, span, a{
  font-family: var(--ra-font-body);
}

/* Links */
a{
  color: var(--ra-accent);
  text-decoration: none;
}
a:hover{
  text-decoration: underline;
}

/* Images */
img{
  max-width: 100%;
  height: auto;
}

/* ==========================
   2) LAYOUT HELPERS
   ========================== */
.ra-container{
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 0 20px;
}

.ra-card{
  background: var(--ra-card-bg);
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius);
  box-shadow: var(--ra-shadow);
}

/* ==========================
   3) BUTTON STYLE
   ========================== */
.ra-button{
  display: inline-block;
  padding: 10px 18px;
  border: 2px solid var(--ra-accent);
  color: var(--ra-accent);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 1px;
  transition: all 0.25s ease;
}

.ra-button:hover{
  background: var(--ra-accent);
  color: #fff;
}

/* ===================================
   4) STICKY PLAYER
   =================================== */
.sticky-player-bar{
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.sticky-player-bar iframe{
  width: min(100%, var(--site-max));
  height: var(--player-height);
  border: none;
  pointer-events: auto;
}

/* ===================================
   5) HOMEPAGE LEFT COLUMN
   =================================== */
.hp-left{
  --nav-h: var(--nav-height-fallback);
  --player-h: var(--player-height);
  --cookie-h: var(--cookie-height-fallback);

  --gap: 6px;
  --gallery-h: 26vh;

  display: flex;
  flex-direction: column;
  gap: var(--gap);

  min-height: calc(100vh - var(--nav-h) - var(--player-h) - var(--cookie-h));
}

/* HERO */
.hp-left > .live-choice{
  flex: 1;
  padding: 10px;
}

/* Cards */
.live-choice .live-choice-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.live-choice .live-card{
  flex: 1 1 500px;
  padding: 14px;
  border-radius: 12px;

  background: rgba(0,0,0,.7);
  color: #fff;
}

.live-choice .live-card h1,
.live-choice .live-card h2,
.live-choice .live-card h3{
  font-family: var(--ra-font-body);
  color: #fff;
}

/* ===================================
   6) GALLERY
   =================================== */
.hp-left > .gallery-row{
  height: var(--gallery-h);
  background: #000;
  overflow: hidden;
}

.hp-left > .gallery-row img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===================================
   7) TABLES
   =================================== */
.ra-table{
  width: 100%;
  border-collapse: collapse;
}

.ra-table th,
.ra-table td{
  border: 1px solid var(--ra-border);
  padding: 10px;
}

/* ===================================
   8) RESPONSIVE
   =================================== */
@media (max-width:1024px){
  .live-choice .live-card{
    flex-basis: 100%;
  }
}

/* ===================================
   9) PRINT
   =================================== */
@media print{
  .sticky-player-bar{
    display: none;
  }

  body{
    background: #fff;
    color: #000;
  }
}