/* @vestfoldfylke/css-components - Pure css components with fylkes-styling */
/* VERSION: 1.0.0 */
/* License: MIT */

:root {
	/* COLOR VARIANTS */
	--primary-color-10: rgb(230, 238, 239);
	--primary-color-20: rgb(204, 220, 223);
	--primary-color-30: rgb(179, 203, 207);
	--primary-color-40: rgb(153, 186, 191);
	--primary-color-50: rgb(128, 169, 176);
	--primary-color-60: rgb(102, 151, 160);
	--primary-color-70: rgb(77, 134, 144);
	--primary-color-80: rgb(51, 117, 128);
	--primary-color-90: rgb(25, 99, 112);
	--primary-color: rgb(0, 82, 96);
	--secondary-color-10: rgb(233, 244, 239);
	--secondary-color-20: rgb(210, 234, 224);
	--secondary-color-30: rgb(188, 223, 208);
	--secondary-color-40: rgb(165, 213, 192);
	--secondary-color-50: rgb(143, 202, 177);
	--secondary-color-60: rgb(121, 191, 161);
	--secondary-color-70: rgb(98, 181, 145);
	--secondary-color-80: rgb(76, 170, 129);
	--secondary-color-90: rgb(53, 160, 114);
	--secondary-color: rgb(31, 149, 98);
	--tertiary-color-10: rgb(230, 245, 249);
	--tertiary-color-20: rgb(204, 235, 243);
	--tertiary-color-30: rgb(179, 225, 237);
	--tertiary-color-40: rgb(153, 215, 231);
	--tertiary-color-50: rgb(128, 205, 225);
	--tertiary-color-60: rgb(102, 195, 218);
	--tertiary-color-70: rgb(77, 185, 212);
	--tertiary-color-80: rgb(51, 175, 206);
	--tertiary-color-90: rgb(25, 165, 200);
	--tertiary-color: rgb(0, 155, 194);

	/* SPECIFIC COLORS */
	--primary-background-color: rgb(242, 246, 247);
	--font-color: rgb(0, 0, 0);
	--font-color-inverted: rgb(255, 255, 255);
	--link-color: rgb(0, 82, 96);
	--link-color-hover: rgb(0, 0, 0);
	--error-color: rgb(183, 23, 61);
	--error-background-color: rgb(241, 209, 216);
	--warning-color: rgb(188, 119, 38);
	--warning-background-color: rgb(242, 228, 212);
	--success-color: rgb(47, 117, 66);
	--success-background-color: rgb(213, 227, 217);

	/* SIZES */
	--font-size-root: 1rem;
	--font-size-extra-large: 2rem;
	--font-size-large: 1.5rem;
	--font-size-small: 0.9rem;
	--font-size-extra-small: 0.8rem;
	--spacing: 1rem;
	--spacing-extra-small: 0.25rem;
	--spacing-small: 0.5rem;
	--spacing-large: 1.5rem;
	--spacing-extra-large: 2rem;
}

/* HTML BODY */
html, body {
	font-family: 'Nunito Sans', Lato, 'Trebuchet MS', sans-serif;
	color: var(--font-color);
	background-color: var(--primary-background-color);
	margin: 0rem;
	padding: 0rem;
	min-height: 100vh;
}

/* END AUTO CSS */
/* Do not remove the line above... */

/* START MANUAL CSS */
/* Here you edit the css to update styling of elements / components. This part will be merged into the resulting css with the autogenerated css above */

/* FOCUS */
:focus-visible {
	outline: 4px solid var(--primary-color);
	outline-offset: 1px;
}

.focus-within:focus-within {
	outline: 4px solid var(--primary-color);
	outline-offset: -2px;
}

.inward-focus-within:focus-within {
	outline: 4px solid var(--primary-color);
	outline-offset: -4px;
}

/* Links */
a, a:visited {
  color: var(--link-color);
  text-decoration: underline;
}
a:hover {
  color: var(--link-color-hover);
}
a span.material-symbols-outlined {
	text-decoration: none;
	vertical-align: text-bottom;
}

/* See button too se a.button class */

/* Headers */
h1, h2, h3, h4, h5 {
	margin-top: var(--spacing);
	margin-bottom: var(--spacing-small);
}

section {
	margin: var(--spacing) 0rem;
}

/* Buttons (and link that looks like button for button hrefs) */
button, a.button {
	font-family: inherit;
	font-size: var(--font-size-root);
	display: flex;
	align-items: center;
	gap: var(--spacing-small);
	background-color: var(--primary-background-color);
	color: var(--primary-color);
	border: 1px solid var(--primary-color);
	border-radius: 2rem;
	min-height: 3rem;
	padding: 0px var(--spacing-large);
	cursor: pointer;
	text-decoration: none; /* Remove from link button (a) */
	box-sizing: border-box; /* To make link button the same size as regular button */
}

button:hover, a.button:hover {
	background-color: var(--primary-color-20);
}

button:active, a.button:active {
	background-color: var(--primary-color-30);
}

button.filled, a.button.filled, .button-input > button {
	background-color: var(--primary-color);
	color: var(--font-color-inverted);
}

button.filled:hover, a.button.filled:hover, .button-input > button:hover {
	background-color: var(--primary-color-80);
}

button.filled:active, a.button.filled:active, .button-input button:active {
	background-color: var(--primary-color-90);
}

button.squared {
	border-radius: 0.4rem;
}

button:disabled, button:disabled:hover {
	background-color: var(--primary-background-color);
	cursor: not-allowed;
	color: grey;
}

button.icon, button.action, a.button.action {
	justify-content: center;
	border-radius: 100%;
	width: 1.5rem;
	height: 1.5rem;
	padding: 1.5rem;
}

button.icon span, button.action span, a.button.action span {
	font-size: 2rem;
}

button.action, a.button.action {
	border: 0px;
	background-color: transparent;
}

button.action:hover, a.button.action:hover {
	background-color: rgba(0, 0, 0, 0.1);
}

button.action:active, a.button.action:active {
	background-color: rgba(0, 0, 0, 0.2);
}

/* Is the one below really necessary... yaeh, so you don't have to remember what to style yourself - BUT remember hover state when designing */
button.blank, button.blank:hover, a.button.blank, a.button.blank:hover {
	height: auto;
	border: 0px;
	border-radius: 0rem;
	margin: 0rem;
	padding: 0rem;
	background-color: transparent;
	text-decoration: none;
	color: var(--font-color);
}

button.link {
	display: block;
	cursor: pointer;
	color: var(--link-color);
  text-decoration: underline;
	padding: 0rem;
	border: 0px;
	min-height: auto;
	background-color: inherit;
}

button.link:disabled, button.link:disabled:hover {
	cursor: not-allowed;
	color: grey;
}

button.link:hover {
	background-color: inherit;
	color: var(--link-color-hover);
}

button.link span.material-symbols-outlined {
	text-decoration: none;
	vertical-align: text-bottom;
	display: inline-block;
}

/* Input elements */
input {
	font-family: inherit;
	font-size: var(--font-size-root);
  min-height: 3.5rem;
	padding: 0rem var(--spacing);
	background-color: var(--primary-background-color);
	border: 2px solid var(--primary-color);
	border-radius: 0.4rem;
}

.icon-input, .button-input, .label-input {
	display: flex;
	align-items: center;
	border: 2px solid var(--primary-color);
	border-radius: 0.4rem;
}

input:disabled, .icon-input.disabled, .button-input.disabled, .label-input.disabled {
	color: grey;
	cursor: not-allowed;
	border-color: grey;
}

input:hover, .icon-input:hover, .button-input:hover, .label-input:hover {
	background-color: var(--primary-color-10);
}

input:disabled:hover, .icon-input.disabled:hover, .button-input.disabled:hover, .label-input.disabled_hover {
	background-color: var(--primary-background-color);
}

.icon-input:hover input, .button-input:hover input, .label-input:hover input {
	background-color: var(--primary-color-10);
}

.icon-input.disabled:hover input, .button-input.disabled:hover input, .label-input.disabled:hover input {
	background-color: var(--primary-background-color);
}

input:focus-visible, .icon-input:focus-within, .button-input:focus-within, .label-input:focus-within {
	outline: 4px solid var(--primary-color);
	outline-offset: -4px;
}

.icon-input input:focus-visible, .button-input input:focus-visible, .label-input input:focus-visible {
	border: 0px solid var(--primary-color);
	outline: 0px;
}

.button-input > button {
	align-self: stretch;
	border-top: 0px;
	border-right: 0px;
	border-bottom: 0px;
	border: 0px solid var(--primary-color);
	border-radius: 0rem;
}

.button-input > button:focus-visible {
	outline: 6px solid var(--primary-color);
	outline-offset: 3px;
}

.button-input input, .label-input input {
	border: 0px solid var(--primary-color);
	flex-grow: 1;
}

/* Icon gets extra padding */
.icon-input input {
	padding: 0px 16px 0px 0px;
	border: 0px solid var(--primary-color);
	flex-grow: 1;
}

.icon-input span {
	padding: 0rem 0.5rem;
	font-size: 1.5rem;
}

.icon-input.round, .button-input.round, .label-input.round {
	border-radius: 3rem;
	padding: 0rem var(--spacing);
}

.button-input.round, .icon-input.button-input.round, .label-input.button-input.round {
	padding: 0rem 0rem 0rem var(--spacing);
}

.button-input.round > button {
	border-radius: 0rem 3rem 3rem 0rem;
}

.icon-input.round input, .button-input.round input, .label-input.round input {
	border-radius: 3rem;
}

.label-input {
	position: relative;
	margin-top: var(--spacing-large);
}

.label-input label {
	font-size: var(--font-size-small);
	position: absolute;
	padding: 0rem 0rem;
	top: -1.5rem;
}

.label-input.required label::after {
	content: " *";
	color: var(--error-color);
}

.label-input:focus-within label {
	font-weight: bold;
}

input[type="radio"], input[type="checkbox"] {
	min-height: 0rem;
	transform: scale(1.5);
	accent-color: var(--primary-color-80);
	margin: var(--spacing-small);
}

input[type="radio"]:focus-visible, input[type="checkbox"]:focus-visible {
	outline: 4px solid var(--primary-color);
	outline-offset: 1px;
}

textarea {
	font-family: inherit;
	font-size: var(--font-size-root);
	border: 2px solid var(--primary-color);
	padding: var(--spacing-small);
	background-color: var(--primary-background-color);
	border: 2px solid var(--primary-color);
	border-radius: 0.4rem;
}

textarea:hover {
	background-color: var(--primary-color-10);
}

select {
	font-family: inherit;
	font-size: var(--font-size-root);
	min-height: 3.5rem;
	height: 3.5rem;
	border: 2px solid var(--primary-color);
	padding: 0rem var(--spacing);
	background-color: var(--primary-background-color);
	border-radius: 0.4rem;
}

select:hover {
	background-color: var(--primary-color-10);
}

.label-select {
	position: relative;
	margin-top: var(--spacing-large);
}

.label-select label {
	font-size: var(--font-size-small);
	position: absolute;
	padding: 0rem 0rem;
	top: -1.375rem;
}

.label-select.required label::after {
	content: " *";
	color: red;
}

.label-select:focus-within label {
	font-weight: bold;
	top: -1.375rem;
}

/* Loading / Spinner */
circle {
	fill: transparent;
	stroke-width: 5;
	stroke-linecap: round;
}
svg {
	animation: svg-rotate 1.4s linear infinite;
}
svg circle:nth-child(2) {
	stroke: #eeeeee;
}
svg circle:nth-child(3) {
	animation: circle-rotate 1.4s ease-in-out infinite both;
	stroke-dasharray: 5rem, 124rem;
	stroke-dashoffset: 0;
	stroke: var(--primary-color)
}

circle {
	fill: transparent;
	stroke-width: 5;
	stroke-linecap: round;
}
svg {
	animation: svg-rotate 1.4s linear infinite;
}
svg circle:nth-child(2) {
	stroke: #eeeeee;
}
svg circle:nth-child(3) {
	animation: circle-rotate 1.4s ease-in-out infinite both;
	stroke-dasharray: 80px,200px;
	stroke-dashoffset: 0;
	stroke: #005260;
}
@keyframes svg-rotate {
	to {
			transform: rotate(1turn)
	}
}

@keyframes circle-rotate {
	0% {
			stroke-dasharray: 1px,200px;
			stroke-dashoffset: 0
	}

	50% {
			stroke-dasharray: 100px,200px;
			stroke-dashoffset: -15px
	}

	to {
			stroke-dasharray: 100px,200px;
			stroke-dashoffset: -120px
	}
}

/*
@keyframes svg-rotate {
	to {
			transform: rotate(1turn)
	}
}

@keyframes circle-rotate {
	0% {
			stroke-dasharray: 0.0625rem,124rem;
			stroke-dashoffset: 0
	}

	50% {
			stroke-dasharray: 62rem,124rem;
			stroke-dashoffset: -1rem;
	}

	to {
			stroke-dasharray: 62rem,124rem;
			stroke-dashoffset: -8rem
	}
}
*/


/*
<a>
<abbr>
<article>
<blockquote>
<button>
<caption>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dialog>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>
<i>
<img>
<input>
<label>
<legend>
<li>
<main>
<nav>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<pre>
<progress>
<search>
<section>
<select>
<span>
<strong>
<sub>
<summary>
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<u>
<ul>
*/
/* Add the new CSS classes at the end of the file */

/* Improve general layout and styling */
body {
  padding: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.content {
  max-width: 800px;
  background-color: var(--secondary-color-10);
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

h1 {
  font-size: var(--font-size-extra-large);
  color: var(--primary-color);
}

/* Visual styles for specific content */
.news-heading {
  color: var(--primary-color-90);
}

.song-title {
  font-size: var(--font-size-large);
  color: var(--primary-color);
}

.song-artist {
  font-size: var(--font-size-large);
  color: var(--secondary-color);
}

.song-image {
  width: 100%;
  height: auto;
  margin-top: var(--spacing-small);
}

/* Enhance countdown display */
#title-countdown, #description-countdown, #image-countdown {
  font-size: var(--font-size-large);
  color: var(--primary-color-70);
}

/* Style audio player */
audio {
  margin-top: 1rem;
  width: 100%;
}

/* Visual styles for update information */
#last-updated, #next-update {
  font-size: var(--font-size-small);
  margin-top: var(--spacing);
  color: var(--font-color);
}

.contributors {
  font-size: var(--font-size-small);
  color: var(--secondary-color-80);
}