/* Mimi and Kate radio */

/* Kate font */
@font-face {
	font-family: Kate;
	src: url(/static/radio/css/content/Kate_Hefferan.woff);
}

/* Mimi font */
@font-face {
	font-family: Mimi;
	src: url(/static/radio/css/content/Kamilah_Davila.woff);
    size-adjust: 75%;
}

/* Font classes for random selection */
.font-kate { font-family: Kate !important; }
.font-mimi { font-family: Mimi !important; }

/* Named broadcaster styles - always use their own font */
.name-kate { font-family: Kate !important; }
.name-mimi { font-family: Mimi !important; }


:root {
	--line-height: 2rem; /* Base line spacing - adjust to match your desired look */
	--top-margin: 4rem; /* Thicker top margin before lines start */
	--line-color: #a8d4ff;
	--paper-color: #fff;
	--margin-color: #e88e8e;
	--hole-color: #b8b8b8;
	--hole-size: 0.75rem;
	--hole-left: 2rem;
	/* Hole positions in rem - scales with zoom like the paper */
	--hole-1: 8rem;
	--hole-2: 28rem;
	--hole-3: 48rem;
}

html{
	font-size: 125%; /* Scale everything up to match 125% zoom appearance */
	background-color: var(--paper-color);
	background-image:
		/* Hole punch 1 - top (shadow for depth) */
		radial-gradient(circle at calc(var(--hole-left) + 2px) calc(var(--hole-1) + 2px), rgba(0,0,0,0.3) var(--hole-size), transparent var(--hole-size)),
		radial-gradient(circle at var(--hole-left) var(--hole-1), var(--hole-color) var(--hole-size), transparent var(--hole-size)),
		/* Hole punch 2 - middle */
		radial-gradient(circle at calc(var(--hole-left) + 2px) calc(var(--hole-2) + 2px), rgba(0,0,0,0.3) var(--hole-size), transparent var(--hole-size)),
		radial-gradient(circle at var(--hole-left) var(--hole-2), var(--hole-color) var(--hole-size), transparent var(--hole-size)),
		/* Hole punch 3 - bottom */
		radial-gradient(circle at calc(var(--hole-left) + 2px) calc(var(--hole-3) + 2px), rgba(0,0,0,0.3) var(--hole-size), transparent var(--hole-size)),
		radial-gradient(circle at var(--hole-left) var(--hole-3), var(--hole-color) var(--hole-size), transparent var(--hole-size)),
		/* Red margin line */
		linear-gradient(90deg, transparent 80px, var(--margin-color) 80px, var(--margin-color) 82px, transparent 82px),
		/* Top margin - solid area before lines start */
		linear-gradient(to bottom, var(--paper-color) var(--top-margin), transparent var(--top-margin)),
		/* Blue horizontal lines */
		repeating-linear-gradient(
			to bottom,
			transparent 0,
			transparent calc(var(--line-height) - 1px),
			var(--line-color) calc(var(--line-height) - 1px),
			var(--line-color) var(--line-height)
		);
	background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% var(--line-height);
	background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 var(--top-margin);
	background-attachment: local;
	height: 100%;
	margin: 0;
	padding: 0;
}

body{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	margin: 0;
	padding: 0;
	line-height: var(--line-height);
}

/* Top header with broadcaster names and date */
.paper-header {
	position: fixed;
	top: 3rem;
	left: 0;
	right: 0;
	height: var(--top-margin);
	display: flex;
    flex-direction: column;
    align-items: flex-end;
	justify-content: right;
	padding: 0 60px 0 90px; /* Left padding accounts for hole punch + margin line */
	box-sizing: border-box;
	font-family: Kate;
	color: rgba(48, 48, 48, 0.852);
	font-size: 1.2rem;
	z-index: 10;
}

.broadcaster-names {
	font-family: Kate;
    line-height: 1.2;
}

.current-date {
	font-family: Kate;
    line-height: 1.2;
}

/*.container{
	display: flex;
	top: 50vh;
}*/

.container{
	display: grid;
	position: relative;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
}

.header {
	font-family: Kate;
	text-align: center;
	color: rgba(48, 48, 48, 0.852);
	font-size: 3rem;
	letter-spacing: 0.1em;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.3em; /* Space between duet and radio spans */
	margin: 0;
	line-height: calc(var(--line-height) * 2); /* Spans 2 lines */
}

.sub {
	font-family: Kate;
	text-align: center;
	color: rgba(48, 48, 48, 0.852);
	line-height: var(--line-height);
}

.player {
	margin-right: 2.5%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Player styles moved from PlayGUI.js */
:root{
    --primary-color: #a8d4ff;
    --background-color: none;
    --text-color: #FFFFFF;
    --control-size: 40px;
    --content-color: #a8d4ff;
}

.player-container {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--background-color);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text-color);
    width: 100%;
    max-width: 500px;
    box-sizing: border-box;
}

.align {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.icecast-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 15px 15px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.icecast-badge.live {
    cursor: pointer;
    background: none;
    color: #22c522;
}

.icecast-badge.offline {
    cursor: default;
    background: none;
    color: #919191;
}

.icecast-badge.caught-up {
    cursor: default;
    background: none;
    color: #22c522;
}

.icecast-badge.caught-up .icecast-dot {
    background: #22c522;
    animation: grow 1.5s ease-in-out infinite;
}

.icecast-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-block;
}

.icecast-badge.live .icecast-dot {
    background: #22c522;
    animation: pulse 1.5s ease-in-out infinite;
}

.icecast-badge.offline .icecast-dot {
    background: #919191;
	
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes grow {
    0% { box-shadow: 0 0 0 0 rgba(199, 34, 34, 0.5); }
    75% { box-shadow: 0 0 0 10px rgba(199, 34, 34, 0); }
}

.play-pause-btn {
    flex-shrink: 0;
    width: var(--control-size);
    height: var(--control-size);
    border: none;
    background: transparent;
    color: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
    transition: all 0.2s ease;
}

.play-pause-btn:hover {
    background: none;
    color: var(--background-color);
    transform: scale(1.15);
    opacity: 0.50;
}

.play-icon {
    width: 75%;
    height: auto;
    opacity: 0.75;
}

.progress-section {
    display: flex;
    align-items: center;
    gap: 5px;
}

.time-separator {
    font-family: Kate;
    color: rgba(48, 48, 48, 0.852);
    font-size: 1.5rem;
    line-height: var(--line-height);
}

.current-time{
    font-family: Kate;
    color: rgba(48, 48, 48, 0.852);
    font-size: 1.5rem;
    line-height: var(--line-height);
    flex-shrink: 0;
}

.duration-time{
    font-family: Kate;
    color: rgba(48, 48, 48, 0.852);
    font-size: 1.5rem;
    line-height: var(--line-height);
    white-space: nowrap;
    flex-shrink: 0;
}

audio {
    display: none;
}

/* ==================== MOBILE STYLES ==================== */

/* Mobile Portrait */
@media screen and (max-width: 600px) {
    :root {
        --line-height: 1.5rem;
        --top-margin: 3rem;
        --hole-size: 0.4rem;
        --hole-left: 1rem;
        --hole-1: 5rem;
        --hole-2: 18rem;
        --hole-3: 31rem;
    }

    html {
        font-size: 100%;
        background-image:
            /* Hole punch 1 - top (shadow for depth) */
            radial-gradient(circle at calc(var(--hole-left) + 1px) calc(var(--hole-1) + 1px), rgba(0,0,0,0.3) var(--hole-size), transparent var(--hole-size)),
            radial-gradient(circle at var(--hole-left) var(--hole-1), var(--hole-color) var(--hole-size), transparent var(--hole-size)),
            /* Hole punch 2 - middle */
            radial-gradient(circle at calc(var(--hole-left) + 1px) calc(var(--hole-2) + 1px), rgba(0,0,0,0.3) var(--hole-size), transparent var(--hole-size)),
            radial-gradient(circle at var(--hole-left) var(--hole-2), var(--hole-color) var(--hole-size), transparent var(--hole-size)),
            /* Hole punch 3 - bottom */
            radial-gradient(circle at calc(var(--hole-left) + 1px) calc(var(--hole-3) + 1px), rgba(0,0,0,0.3) var(--hole-size), transparent var(--hole-size)),
            radial-gradient(circle at var(--hole-left) var(--hole-3), var(--hole-color) var(--hole-size), transparent var(--hole-size)),
            /* Red margin line - moved closer */
            linear-gradient(90deg, transparent 32px, var(--margin-color) 32px, var(--margin-color) 34px, transparent 34px),
            /* Top margin */
            linear-gradient(to bottom, var(--paper-color) var(--top-margin), transparent var(--top-margin)),
            /* Blue horizontal lines */
            repeating-linear-gradient(
                to bottom,
                transparent 0,
                transparent calc(var(--line-height) - 1px),
                var(--line-color) calc(var(--line-height) - 1px),
                var(--line-color) var(--line-height)
            );
        background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% var(--line-height);
        background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 var(--top-margin);
    }

    .paper-header {
        top: 1rem;
        padding: 0 15px 0 50px;
        font-size: 0.9rem;
    }

    .header {
        font-size: 2rem;
        letter-spacing: 0.05em;
        line-height: calc(var(--line-height) * 2);
    }

    .container {
        padding: 0 10px;
        width: 100%;
        box-sizing: border-box;
    }

    .player-container {
        padding: 10px;
        gap: 8px;
        max-width: 100%;
    }

    .icecast-badge {
        padding: 10px;
    }

    .icecast-dot {
        width: 24px;
        height: 24px;
    }

    .align {
        gap: 10px;
    }

    .current-time,
    .duration-time,
    .time-separator {
        font-size: 1.1rem;
    }

    :root {
        --control-size: 36px;
    }
}

/* Mobile Landscape */
@media screen and (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
    :root {
        --line-height: 1.25rem;
        --top-margin: 2rem;
        --hole-size: 0.35rem;
        --hole-left: 0.8rem;
        --hole-1: 3rem;
        --hole-2: 10rem;
        --hole-3: 17rem;
    }

    html {
        font-size: 90%;
        background-image:
            /* Hole punch 1 - top (shadow for depth) */
            radial-gradient(circle at calc(var(--hole-left) + 1px) calc(var(--hole-1) + 1px), rgba(0,0,0,0.3) var(--hole-size), transparent var(--hole-size)),
            radial-gradient(circle at var(--hole-left) var(--hole-1), var(--hole-color) var(--hole-size), transparent var(--hole-size)),
            /* Hole punch 2 - middle */
            radial-gradient(circle at calc(var(--hole-left) + 1px) calc(var(--hole-2) + 1px), rgba(0,0,0,0.3) var(--hole-size), transparent var(--hole-size)),
            radial-gradient(circle at var(--hole-left) var(--hole-2), var(--hole-color) var(--hole-size), transparent var(--hole-size)),
            /* Hole punch 3 - bottom */
            radial-gradient(circle at calc(var(--hole-left) + 1px) calc(var(--hole-3) + 1px), rgba(0,0,0,0.3) var(--hole-size), transparent var(--hole-size)),
            radial-gradient(circle at var(--hole-left) var(--hole-3), var(--hole-color) var(--hole-size), transparent var(--hole-size)),
            /* Red margin line */
            linear-gradient(90deg, transparent 25px, var(--margin-color) 25px, var(--margin-color) 27px, transparent 27px),
            /* Top margin */
            linear-gradient(to bottom, var(--paper-color) var(--top-margin), transparent var(--top-margin)),
            /* Blue horizontal lines */
            repeating-linear-gradient(
                to bottom,
                transparent 0,
                transparent calc(var(--line-height) - 1px),
                var(--line-color) calc(var(--line-height) - 1px),
                var(--line-color) var(--line-height)
            );
        background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% var(--line-height);
        background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 var(--top-margin);
    }

    body {
        padding: 5px 0;
    }

    .paper-header {
        top: 0.3rem;
        padding: 0 15px 0 35px;
        font-size: 0.7rem;
    }

    .header {
        font-size: 1.4rem;
        letter-spacing: 0.05em;
        line-height: calc(var(--line-height) * 1.5);
        margin-bottom: 0;
    }

    .container {
        display: flex;
        flex-direction: row;
        align-items: center; /* vertical alignment of items */
        justify-content: center;
        gap: 20px;
        padding: 0 10px;
        width: 100%;
        box-sizing: border-box;
    }

    .player {
        margin-right: 0;
    }

    .player-container {
        padding: 6px;
        gap: 6px;
        align-items: center; /* vertical alignment within player */
    }

    .icecast-badge {
        padding: 6px;
    }

    .icecast-dot {
        width: 18px;
        height: 18px;
    }

    .align {
        gap: 6px;
        align-items: center; /* vertical alignment of time/button */
    }

    .current-time,
    .duration-time,
    .time-separator {
        font-size: 0.9rem;
    }

    :root {
        --control-size: 28px;
    }
}

/* Small phones */
@media screen and (max-width: 380px) {
    .header {
        font-size: 1.6rem;
    }

    .paper-header {
        font-size: 0.8rem;
        padding: 0 10px 0 45px;
    }

    .current-time,
    .duration-time,
    .time-separator {
        font-size: 1rem;
    }
}