/*
Theme Name: radiOzora 2026
Theme URI: https://2026.radiozora.fm
Author: Mnemotechnika Ltd.
Author URI: https://mnemotechnika.hu
Description: radiOzora 2026 Wordpress Theme.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: ajax, responsive, wordpress
*/

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: inherit;
	font-weight: inherit;
	font-family: inherit;
	font: inherit;
	text-align: inherit;
	text-transform: inherit;
	vertical-align: inherit;
	list-style-type: none;
	outline: none;
	text-decoration: none;
	border-collapse: collapse;
	border: none;
	border-color: transparent;
	color: inherit;
	line-height: inherit;
	background-repeat: no-repeat;
	position: relative;
}

:root {
	--day-color:#58585b; /*rgb(88, 88, 91);*/
    --day-background-color: white;
    --night-color:#fdfcf0;  /*rgb(253, 252, 240);*/ 
    --night-background-color:#58585b; /*rgb(88, 88, 91);*/

    --day-trance-color:#ec008c; /*rgb(236, 0, 140);*/
    --day-alter-color:#6900c7; /*rgb(105, 0, 199);*/
    --night-alter-color:#00e7dc; /*rgb(0, 231, 220);*/
    --night-trance-color:#ffff4e; /*rgb(255, 255, 78);*/

	--logo-cell: calc( 0.6vh );
    --margin: 4vh;
}

::-webkit-scrollbar {
	width: calc( 0.3vh + 0.2vw );
	height: calc( 0.3vh + 0.2vw );
	background: transparent;
}
::-webkit-scrollbar-track {
	background: transparent;
}
::-webkit-scrollbar-thumb {
	background: var(--main-color);
	border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
	background: var(--main-color);
}

html {
    font-family: "Barlow", sans-serif;
      font-weight: 400;
      font-style: normal;
    font-size: calc( var( --logo-cell ) * 4 );
      line-height: 1.1rem;
    color: var(--day-color);
    scroll-behavior: smooth;
    vertical-align: baseline;
    background-color: var(--day-background-color);
    height: 100%;
}

html.night {
	background-color: var(--night-background-color);
}

body {
    height: 100svh;           /* <<< ez a lényeg: fix magasság */
    min-height: 100svh;       /* opcionális, de nem árt */
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden;         /* hogy a body ne scrollozzon */
}


b,
strong { font-weight: 600; }
i,
em { font-style: italic; }




.wrapper {
  width: 100%;
  max-width: calc(var(--logo-cell) * 100);
  margin-inline: auto;
}







#logo {
    width: calc(100% - (var(--logo-cell) * 4));
    background-color: rgb( 0, 26, 51 );
    padding: calc(var(--logo-cell) * 2);
}
#logo .row {
    display: flex;
    width: 100%;
    line-height: 0;
}
#logo .px {
    height: var(--logo-cell);
    background: transparent;
    flex: 0 0 var(--logo-cell);
}
#logo .px.on {
    background: rgb( 0, 89, 179 );
}
#logo .px.elastic {
    flex: 1 1 0;
}


















#trance, #alter {
    display: flex;
    align-items: center;
    gap: 2vh;
    flex-wrap: nowrap;
    padding: var( --logo-cell);
}


#trance > .wrapper,
#alter  > .wrapper {
  display: flex;
  align-items: center;
  gap: 2vh;
  flex-wrap: nowrap;
}

.player {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-direction: column;
    
    font-size: 0;       /* 🔥 ETTŐL TÜNIK EL A NEM KÍVÁNT "0" SZÖVEGNODE */
    line-height: 0;     /* 🔥 hogy ne legyen baseline */
}

.player .play,
.player .pause {
    font-size: initial;
    line-height: normal;
}
.live {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

#trance {
    background-color: var(--day-trance-color);
    height: calc(var(--logo-cell) * 19);
}
#trance .player { fill: var(--night-trance-color); }
#trance .live {
    color: var(--night-trance-color);
    text-align: left;
    padding-left: calc(var(--logo-cell) * 1);
}

#alter {
    background-color: var(--day-alter-color);
    height: calc(var(--logo-cell) * 19);
}
#alter .player { fill: var(--night-alter-color); }
#alter .live {
    color: var(--night-alter-color);
    text-align: right;
    padding-right: calc(var(--logo-cell) * 1);
}

.play, .pause {
    display: block;
    height: calc(var(--logo-cell) * 19);
    width: auto;
    position: relative;
    z-index: 2;              /* 🔥 gomb mindig a VU fölött legyen */
}
.pause { display: none; }


.live .show,
.live .track,
.live .next {
  display: block;
  white-space: nowrap;
  overflow: hidden;
}
.live .show b,
.live .next b {
  font-weight: 600;
  text-transform: uppercase;
}
.next {
    line-height: 2em;
}


/* A play/pause SVG-k egymás mellett maradnak, a VU ezek ALATT lesz */
#trance .player,
#alter .player {
    display: flex;
    flex-direction: column;   /* fentről lefelé: SVG, alatta VU */
    align-items: center;
    justify-content: center;
}


/* A VU szelet a player SZÉLÉN, teljes magasságban, margó/padding nélkül */

.vu {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;

    display: flex;
    justify-content: center;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity .25s linear;
}

/* A teljes 19 sávos blokk – fix magasság, középen */
.vu-bars {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(var(--logo-cell) * 19);   /* 🔥 19 sáv */
    margin: auto 0;             /* vertikális közép */
    padding: 0;
    gap: 0;
}

.vu-bars .bar {
    height: var(--logo-cell);      /* fix sáv-vastagság */
    width: 100%;
    margin: 0;
    opacity: 0.5;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 60ms linear;
}

#trance .vu-bars .bar {
    transform-origin: right center;
    background-color: var(--night-trance-color);
}
#alter  .vu-bars .bar {
    background-color: var(--night-alter-color);
}











#tranceTimetable,
#alterTimetable {
    display: none; /* JS úgyis átállítja block-ra, amikor kell */
    padding: calc( var( --logo-cell ) * 2 );
    line-height: calc( var( --logo-cell ) * 4 );

    flex: 1 1 auto;   /* ugyanúgy viselkedjenek, mint #posts */
    min-height: 0;
    overflow-y: auto; /* scrollozhatóak legyenek */
}
#tranceTimetable {
    background-color: var(--night-trance-color );
    color: var(--day-trance-color);
    text-align: left;
}
#alterTimetable {
    background-color: var(--night-alter-color );
    color: var(--day-alter-color);
    text-align: right;
}
#alterTimetable strong {
    
}
#tranceTimetable h2, #alterTimetable h2 {
    text-transform: uppercase;
    line-height: calc( var( --logo-cell ) * 8 );
}
#tranceTimetable strong, #alterTimetable strong {
    font-weight: 700;
    text-transform: uppercase;
}






#content {
    flex: 1 1 auto;              /* kitölti a logo–trance–alter és footer közti teret */
    display: flex;
    flex-direction: column;
    min-height: 0;               /* KELL, hogy a gyerek (posts) tudjon overflow-olni */
}






















#categories {
  flex: 0 0 auto;
    padding: calc( var( --logo-cell ) * 2 ) 0;
}
#categories div {
    text-align: center;
}
.category-link {
    height: calc( var( --logo-cell ) * 6 );
    display: inline-block;
}
.category-link.off {
    display: none;
}



.cat-link {
  position: relative;
  display: inline-block;
  line-height: 0;
  cursor: pointer;
  text-decoration: none;
}

.cat-link .category-link.on {
  display: none;
  position: absolute;
  inset: 0;
}

/* Hover: csak az "on" verzió látszik */
.cat-link:hover .category-link:not(.on) { visibility: hidden; }
.cat-link:hover .category-link.on { display: block; visibility: visible; }

/* Active: ha .active osztály van, akkor az "on" marad */
.cat-link.active .category-link:not(.on) { visibility: hidden; }
.cat-link.active .category-link.on { display: block; visibility: visible; }


















#posts {
    display: block;
    flex: 1 1 auto;      /* kitölti a #content maradék magasságát */
    min-height: 0;
    overflow-y: auto;    /* <<< csak itt van scroll */
}

.posts-list {
  width: 100%;
  max-width: calc(var(--logo-cell) * 100);
  margin-inline: auto;
  /* opcionális kényelmi belső margó szűk kijelzőknél: */
  padding-inline: calc(var(--logo-cell) * 2);
  box-sizing: border-box;
}

.post-card {
  display: block;
  min-height: 12vh;   /* hogy körbefolyásnál biztosan legyen elég magasság */
}
.post-card.trance .headline, 
.post-card.trance .meta-row b {
    color: var(--day-trance-color);
}
.post-card.alter .headline, 
.post-card.alter .meta-row b {
    color: var(--day-alter-color);
}
.post-card::after { 
  content:""; 
  display:block; 
  clear:both; 
  margin: 1em 0;
}

.post-thumb {
  float: left;
  height: 13vh;
  aspect-ratio: 1 / 1;
  margin-right: 0.8em;
  margin-bottom: 0.8em;
  background: #ddd;
  overflow: hidden;
}
.post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

/* szöveg oszlop – engedje körbefolyni és törje a nagyon hosszú szavakat */
.post-body {
  overflow: visible;
  word-break: break-word;
}
.post-body a {
  color: inherit;
  text-decoration: underline;
}

.post-body blockquote {
  font-style: italic;
  font-size: 0.8em;
  line-height: 1em;
}

.post-category {
  text-transform: uppercase;
  font-size: 0.8rem;
  line-height: 0.8rem;
  margin-bottom: 0.4rem;
}
.post-category a {
  color: inherit;
  text-decoration: none;
}
.post-category a:hover {
  text-decoration: underline;
}

.headline {
  font-weight: 700;
  font-size: 1.2rem;
  text-transform: uppercase;
}
.headline a { text-decoration: none; }

.meta-row {
  margin-top: 0.4rem;
  line-height: 1.2em;
  font-size: 0.8em;
}

b { font-weight: 600; }

.badge {

}
.badge.alter { background: var(--day-alter-color); }

.date-chip {
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: calc( var(--logo-cell) * 4 );
}

.excerpt {
  font-size: 0.8em;
  line-height: 1em;
}

/* expanded kártya: kép teljes szélességben, felül */
.post-card.expanded .post-thumb {
  float: none;
  width: 100%;
  max-width: 100%;
  aspect-ratio: auto;
  margin: 0 0 1rem 0;
}
.post-card.expanded .post-thumb img {
  width: 100%;
  height: auto;
  object-fit: cover; /* magasság auto, object-fit itt nem számít, de maradhat */
}

/* expanded tartalom: kapjon kicsit több vezetést */
.post-card.expanded .excerpt {
  opacity: 1;
}

/* opcionális: headline alatt kisebb térköz, hogy a nagy kép és a content jól üljön */
.post-card.expanded .headline { margin-bottom: .3rem; }

.post-card.expanded p {
    padding: 0.4em 0;
}








#footer {
    text-align: center;
    padding: calc( var( --logo-cell ) * 2 ) 0;
    color: var(--day-color);
} 
#footerlogo {
    height: calc( var( --logo-cell ) * 4 );
    width: auto;
    fill: var(--day-color);
    margin: calc( var( --logo-cell ) * 1 );
}

.loading {
  text-align: center;
}