/*DEFAULTS START*/
html {
    font-family: var(--default-font);
	font-size: var(--default-font-size);
	line-height: var(--line-height);
	letter-spacing: var(--letter-spacing);
	background-color: var(--bg-color);
	color: var(--primary-font-color);
	scroll-behavior: smooth;
}

body {
	display: flex;
	flex-direction: column;
	line-height: var(--line-height);
}

*:focus,
*:focus-visible {
	outline: 0.25rem solid var(--focus-color);
	outline-offset: 0.25rem;
	border-radius: 0.25rem;
	z-index: 9997;	
}

*:focus {
	background-color: unset;
	color: unset;
}

*:focus-visible {
	background-color: var(--info-color)!important;
	color: var(--secondary-font-color)!important;	
}

::selection {
	color: var(--primary-font-color);
	background: var(--highlight-color);
}

[data-accessibility~="noimg"] img {
    display: none!important;
    visibility: hidden!important;
    opacity: 0!important;
}

[data-accessibility~="low-saturation"] {
    filter: saturate(50%)!important;
	-webkit-backdrop-filter: saturate(.75);
	backdrop-filter: saturate(.75);
}

[data-accessibility~="high-saturation"] {
	filter: saturate(200%)!important;
	-webkit-backdrop-filter: saturate(5);
	backdrop-filter: saturate(5)
}

[data-accessibility~="monochrome"] {
	filter: grayscale(100%)!important;
	-webkit-backdrop-filter: grayscale(1)!important;
	backdrop-filter: grayscale(1) !important;
}

[data-accessibility~="titles"] h1,
[data-accessibility~="titles"] h2,
[data-accessibility~="titles"] h3,
[data-accessibility~="titles"] h4,
[data-accessibility~="titles"] h5 {
	outline: 0.25rem solid var(--info-color);
	outline-offset: 0.2rem;
	border-radius: 0.25rem;
}

[data-accessibility~="disabled"] * {
	transition: none!important;
	animation-fill-mode: forwards!important;
	animation-iteration-count: 1!important;
	animation-duration: 10ms!important;
}

[data-accessibility~="spacing"] * {
	letter-spacing: 0.25rem!important;
	word-spacing: 0.5rem!important;
}

[data-accessibility~="line"] #main * {
	line-height: 3rem!important;
}

[data-accessibility~="black-cursor"] {
	cursor: url(../img/black-cursor.svg), default!important
}

[data-accessibility~="black-cursor"] [role=button],
[data-accessibility~="black-cursor"] a,
[data-accessibility~="black-cursor"] button,
[data-accessibility~="black-cursor"] label,
[data-accessibility~="black-cursor"] input,
[data-accessibility~="black-cursor"] select,
[data-accessibility~="black-cursor"] textarea {
	cursor: url(../img/black-pointer.svg), default!important
}

[data-accessibility~="white-cursor"] {
	cursor: url(../img/white-cursor.svg), default!important
}

[data-accessibility~="white-cursor"] [role=button],
[data-accessibility~="white-cursor"] a,
[data-accessibility~="white-cursor"] button,
[data-accessibility~="white-cursor"] label,
[data-accessibility~="white-cursor"] input,
[data-accessibility~="white-cursor"] select,
[data-accessibility~="white-cursor"] textarea {
	cursor: url(../img/white-pointer.svg), default!important
}

html[data-accessibility~="focus-mask"] #focus-mask {
  display: block;
}

#focus-mask {
  display: none;
}

#focus-mask {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* dim color */
    pointer-events: none;
    z-index: 9999;

    /* initial inverted mask: strip is dimmed */
    -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 40%, transparent 60%, black 60%);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;

    mask-image: linear-gradient(to bottom, black 40%, transparent 40%, transparent 60%, black 60%);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}

a[href]:not(:where(
	[href^="#"],
	[href^="/"]:not([href^="//"]),
	[href^="mailto:"],
    a[href^="mailto:"],
	[href^="tel:"],
	[href^="http://sinuga.test"],
	[href^="https://sinuga.test"],
	[href^="https://sinuga.epikoda.ee"],
	[href^="https://ajakiri.epikoda.ee"],
	[href^="https://www.sinuga.epikoda.ee"],
	[href^="https://www.ajakiri.epikoda.ee"],
	[href^="http://epikoda.test"],
	[href^="https://epikoda.test"],
	[href^="https://test.epikoda.ee"],
	[href^="https://epikoda.ee"],
	[href^="https://www.epikoda.ee"],
	[href*="javascript:void(0);"],
    figure > a,
    [data-type="button"],
	[data-type="article-share"] a,
    #accessibilityButton
)):after {
	position: absolute;
	top: 0;
	right: 0;
 	content: url(../img/newtab.svg);
	margin-left: var(--spacing-tiny);
	width: var(--spacing-normal);
	height: var(--spacing-normal);
}

a[href]:not(:where(
	[href^="#"],
	[href^="/"]:not([href^="//"]),
	[href^="mailto:"],
	[href^="tel:"],
	[href^="http://sinuga.test"],
	[href^="https://sinuga.test"],
	[href^="https://sinuga.epikoda.ee"],
	[href^="https://ajakiri.epikoda.ee"],
	[href^="https://www.sinuga.epikoda.ee"],
	[href^="https://www.ajakiri.epikoda.ee"],
	[href^="http://epikoda.test"],
	[href^="https://epikoda.test"],
	[href^="https://test.epikoda.ee"],
	[href^="https://epikoda.ee"],
	[href^="https://www.epikoda.ee"],
	[href*="javascript:void(0);"],
    figure > a,
    [data-type="button"],
    [data-type="article-share"] a,
	#accessibilityButton
)) {
	padding-right: calc(var(--spacing-normal) + 0.25rem);
}

footer a[href]:not(:where(
	[href^="#"],
	[href^="/"]:not([href^="//"]),
	[href^="mailto:"],
	[href^="tel:"],
	[href^="http://sinuga.test"],
	[href^="https://sinuga.test"],
	[href^="https://sinuga.epikoda.ee"],
	[href^="https://ajakiri.epikoda.ee"],
	[href^="https://www.sinuga.epikoda.ee"],
	[href^="https://www.ajakiri.epikoda.ee"],
	[href^="http://epikoda.test"],
	[href^="https://epikoda.test"],
	[href^="https://test.epikoda.ee"],
	[href^="https://epikoda.ee"],
	[href^="https://www.epikoda.ee"],
	[href*="javascript:void(0);"],
    figure > a,
    [data-type="article-share"] a,
    [data-type="button"]
)):after {
	filter: invert(1);
}

a { 
	position: relative;
	font-weight: 700;
	color: var(--primary-font-color);
	text-decoration: underline;
	text-underline-offset: var(--spacing-tiny);
	text-decoration-thickness: calc(var(--spacing-xx-small) / 2);
	transition-duration: 200ms;
}

a:hover {
	color: var(--primary-font-color);
	text-decoration: underline;
	text-underline-offset: var(--spacing-tiny);
	text-decoration-thickness: calc(var(--spacing-xx-small) / 2);	
	text-decoration-style: wavy;
	transition-duration: 200ms;
}

footer a,
footer a:hover {
	color: var(--secondary-font-color);
}

[data-accessibility~="links"] a {
	background-color: var(--highlight-color)!important;
	color: var(--primary-font-color)!important;
}

[data-type="button"]:hover {
	color: unset;
	text-decoration: unset;
	text-underline-offset: unset;
	text-decoration-thickness: unset;	
	text-decoration-style: unset;
	transition-duration: unset;	
}

p {
	text-underline-offset: 0.25rem;
}

h1,
h2,
h3,
h4,
h5 {
	font-family: var(--title-font);
	line-height: var(--title-line-height);
    width: fit-content;
}

h1 {
	font-size: var(--title-1-size);
}

@media only screen and (max-width: 45rem) {
	h1 {
		font-size: calc(0.78 * var(--title-1-size));
	}	
}

h2 {
	font-size: var(--title-2-size);
}

h3 {
	font-size: var(--title-3-size);
}

h4 {
	font-size: var(--title-4-size);
}

:is(h1, h2, h3, h4, h5) + :is(h2, h3, h4, h5, h6) {
    margin-top: 0.25rem;
}

main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
/*DEFAULTS END*/

/*SCROLLBAR START*/
::-webkit-scrollbar {
	width: var(--spacing-x-small);
}

::-webkit-scrollbar-track {
	background: rgba(240,242,248,.66);
}

::-webkit-scrollbar-thumb {
  background: #606060;
}

::-webkit-scrollbar-thumb:hover {
	background: #808080;
}

[data-scroll="false"],
.no-scroll {
	overflow: hidden;
}
/*SCROLLBAR END*/

/*HOMEPAGE START*/
[data-type="main-content-container"] {
	display: flex;
	flex-direction: column;
	gap: 3rem;
    background-color: var(--bg-color-alt);
}

[data-type="number-intro"],
[data-type="show-intro"] {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-type="number-intro"] h1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10vw;
    font-weight: 700;
    color: white;
	-webkit-user-select: none; 
	-ms-user-select: none;
	user-select: none; 	
}

[data-type="show-intro"] h1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
	padding: 10px;
	padding-bottom: 20px;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
	font-size: 8vw;
    font-weight: 700;
	line-height: 1;
    color: var(--bg-color-alt);
	-webkit-user-select: none; 
	-ms-user-select: none;
	user-select: none; 	
}

[data-type="number-intro"] h1 div,
[data-type="show-intro"] h1 div {
    position: relative;
    display: inline-block;
}

[data-type="number-intro"] h1 div span,
[data-type="show-intro"] h1 div span {
    position: absolute;
    top: 1.2vw;
    right: 1vw;
	font-family: var(--default-font);
    font-size: 2vw;
	font-weight: 400;
	text-transform: uppercase;
}

@media only screen and (max-width: 48rem) {
	[data-type="number-intro"] h1,
	[data-type="show-intro"] h1 {
		font-size: 15vw;
	}	
	
	[data-type="number-intro"] h1 div span,
	[data-type="show-intro"] h1 div span {
		font-size: 3vw;
	}
}	

[data-type="number-intro"] > img,
[data-type="show-intro"] > img {
    width: 100%;
    height: 100vh; 
    object-fit: cover;
}		

[data-type="number-intro"] > p,
[data-type="show-intro"] > p {
    position: absolute; 
    bottom: 70px; 
    font-weight: 400; 
    font-size: 20px; 
    color: white; 
    -webkit-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    text-align: center;
    z-index: 9996;
}

[data-type="number-intro"] > a,
[data-type="show-intro"] > a {
    width: 4rem; 
    position: absolute; 
    bottom: 0.75rem; 
    cursor: pointer;
    z-index: 9996;
	filter: invert(1);
}

[data-type="number-intro"] > a img,
[data-type="show-intro"] > a img {
	width: 100%;
}

[data-type="number-intro"] [data-type="more-numbers"] {
	position: absolute;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	aspect-ratio: 210 / 297;
	background-color: #FFF;
	border-top-right-radius: 1rem;
}

@media only screen and (max-width: 80rem) {
	[data-type="number-intro"] [data-type="more-numbers"] {
		display: none;
	}
}	

[data-type="number-intro"] [data-type="more-numbers"] a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 1rem;
	background-color: var(--bg-color-alt);
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
	font-size: 1.2rem;
	text-decoration: none;	
}

[data-type="number-intro"] [data-type="more-numbers"] a > img {
	width: 20rem;
	height: auto;
	border-top-right-radius: 1rem;
	margin-bottom: 0.5rem;
}

@media only screen and (max-width: 100rem) {
	[data-type="number-intro"] [data-type="more-numbers"] a > img {
		width: 16rem;
	}
}	

[data-type="number-intro"] [data-type="more-numbers"] a span {
	display: flex;
	flex-direction: row;
}

[data-type="number-intro"] [data-type="more-numbers"] a span > img {
	width: 2rem;
	margin-top: -0.3rem;
}

[data-type="number-intro"] [data-type="call-to-action"],
[data-type="show-intro"] [data-type="call-to-action"] {
	display: flex;
	flex-direction: row;
	gap: 2rem;
	position: absolute;
	width: fit-content;
	bottom: 0;
}

[data-type="number-intro"] [data-type="call-to-action"] a,
[data-type="show-intro"] [data-type="call-to-action"] a {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 1rem;
	background-color: var(--bg-color-alt);
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
	font-size: 1.2rem;
	text-decoration: none;
}

[data-type="show-intro"] [data-type="call-to-action"] a {
	background-color: var(--bg-color);
}

@media only screen and (max-width: 40rem) {
	[data-type="number-intro"] [data-type="call-to-action"],
	[data-type="show-intro"] [data-type="call-to-action"] {
		width: 100%;
	}
	
	[data-type="number-intro"] [data-type="call-to-action"] a,
	[data-type="show-intro"] [data-type="call-to-action"]  a{
		width: 100%;
		border-top-left-radius: unset;
		border-top-right-radius: unset;		
	}	
}	

[data-type="number-intro"] [data-type="call-to-action"] img,
[data-type="show-intro"] [data-type="call-to-action"]  img {
	width: 3rem;
	margin-top: -0.3rem;
}

[data-type="number-intro"] [data-type="easy-to-read"],
[data-type="show-intro"] [data-type="easy-to-read"] {
	position: absolute;
	width: 5rem;
	height: auto;
	top: 2rem;
	right: 0;	
	border-radius: 1rem 0 0 1rem;
	-webkit-user-select: none; 
	-ms-user-select: none;
	user-select: none; 		
}

@media only screen and (max-width: 45rem) {
	nav [data-type="easy-to-read"],
	[data-type="number-intro"] [data-type="easy-to-read"],
[data-type="show-intro"] [data-type="easy-to-read"] {
		display: none;
	}	
	
    [data-type="number-intro"] > p,
	[data-type="show-intro"] > p {
        bottom: 7.5rem; 
    }

    [data-type="number-intro"] > a,
	[data-type="show-intro"] > a {
        bottom: 5rem; 
    }
}	


[data-type="number-content"] {
	display: grid;
	grid-column-gap: 3rem;
	grid-row-gap: 3rem;
	padding: 1rem 3rem 0 3rem;
	margin: auto;
}

@media only screen and (max-width: 215rem) {
	[data-type="number-content"] {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media only screen and (max-width: 160rem) {
	[data-type="number-content"] {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media only screen and (max-width: 90rem) {
	[data-type="number-content"] {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media only screen and (max-width: 62rem) {
	[data-type="number-content"] {
		grid-template-columns: repeat(1, 1fr);
		grid-row-gap: 2rem;
		padding: 0 1rem 0 1rem;		
	}
}	

[data-type="number-content"] a {
	border-radius: 5px;
    background-color: var(--bg-color);
	text-decoration: none;
}

[data-type="number-content"] a > div:first-child {
	position: relative;
	aspect-ratio: 16 / 9;
	background-color: var(--muted-color);
	border-radius: 0.375rem 0.375rem 0 0;
}

[data-type="number-content"] a > div:first-child > div {  
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--primary-font-color);
    width: 100%;
	height: 100%;
	opacity: 0.7;
	display: none;
	border-radius: 0.375rem 0.375rem 0 0;
	
}

[data-type="number-content"] a > div:first-child p {
	position: absolute;
	display: none;
	font-size: 1.5rem;
    width: 100%;
	height: 100%;
	top: 0;
}

[data-type="number-content"] a > div:first-child img {
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;  
	border-radius: 0.375rem 0.375rem 0 0;   
}

[data-type="number-content"] a:hover {
	background-color: var(--bg-color-opposite);
	color: var(--secondary-font-color);
	cursor: pointer;
}

[data-type="number-content"] a > div:nth-child(2) {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1rem;
}

[data-type="number-content"] a > div:nth-child(2) h1 {
	font-family: "Atkinson Hyperlegible Next";
	font-size: 1.6rem;
	font-weight: 700;  
	line-height: 1.2;
	letter-spacing: 0.05rem;
}

[data-type="number-content"] a > div:nth-child(2) p {
	font-family: "Atkinson Hyperlegible Mono", sans-serif;
	font-size: 1.1rem;  
	font-weight: 400;
	letter-spacing: 0.005rem;
	color: var(--primary-font-color);
}

[data-type="number-content"] a:hover > div:nth-child(2) p {
	color: var(--bg-color-alt);
}

[data-type="number-content"] a:hover > div:first-child > div {
	display: flex;
	justify-content: center;
	align-items: center;	
}

[data-type="number-content"] a:hover > div:first-child p {
	display: flex;
	justify-content: center;
	align-items: center;	
	color: var(--bg-color-alt);
	z-index: 9997;
}

/*OTHER NUMBERS START*/
[data-type="other-numbers"] {
    display: flex;
    justify-content: center;
	padding: 0 3rem 0 3rem;
	margin-bottom: 3rem;
}

@media only screen and (max-width: 62rem) {
	[data-type="other-numbers"] {
		padding: 0 1rem 0 1rem;	
		margin-bottom: 2rem;
	}
}	

[data-type="other-numbers"] h2 {
    letter-spacing: 0.5px;
	margin-bottom: 1.25rem;
}

[data-type="other-numbers"] > div {
    width: 100%;
	padding: 2rem 3rem 3rem 3rem;
	background-color: var(--bg-color);
	border-radius: 0.375rem;
}

@media only screen and (max-width: 62rem) {
	[data-type="other-numbers"] > div {
		padding: 1rem;
	}
}	

[data-type="other-numbers"] > div > div {
	display: grid; 
	grid-template-columns: repeat(5, 1fr); 
	column-gap: 1.25rem;
	row-gap: 1.25rem;
}

[data-type="other-numbers"] > div > div > a:hover {
	transform: scale(1.05);
}

[data-type="other-numbers"] > div > div > a > div,
[data-type="other-numbers"] > div > div > a > div img {
	border-radius: 0.375rem;
} 

@media only screen and (max-width: 80rem) {
	[data-type="other-numbers"] > div > div {
		grid-template-columns: repeat(4, 1fr); 
	} 
}	

@media only screen and (max-width: 64rem) {
	[data-type="other-numbers"] > div > div {
		grid-template-columns: repeat(3, 1fr); 
	} 
}	

@media only screen and (max-width: 48rem) {
	[data-type="other-numbers"] > div > div {
		grid-template-columns: repeat(2, 1fr); 
	} 
}	

@media only screen and (max-width: 22.5rem) {
	[data-type="other-numbers"] > div > div {
		grid-template-columns: repeat(1, 1fr); 
	} 
}	

[data-type="other-numbers"] > div > div > a > div {
	aspect-ratio: 210 / 297;
	background-color: var(--muted-color);
}

[data-type="other-numbers"] > div > div > a > div img {
	aspect-ratio: 210 / 297;
	object-fit: cover;
}
/*HOMEPAGE END*/



/*ARTICLE START*/
nav {
	width: 100%;
}

nav [data-type="magazine-title"] {	
	position: fixed;
	top: 2rem;
	left: 0;
	z-index: 9997;
	background-color: var(--primary-color);
	padding: 1rem 1rem 1rem 3rem;
	border-radius: 0 1rem 1rem 0;
	color: var(--secondary-font-color);
	text-decoration: none;
	-webkit-user-select: none; 
	-ms-user-select: none;
	user-select: none; 		
}

@media only screen and (max-width: 62rem) {
	nav [data-type="magazine-title"] {	
		padding: 1rem 1rem 1rem 1rem;
	}
}

nav [data-type="easy-to-read"] {
	position: fixed;
	width: 5rem;
	height: auto;
	top: 2rem;
	right: 0;
	z-index: 9997;
	-webkit-user-select: none; 
	-ms-user-select: none;
	user-select: none; 		
}

@media only screen and (max-width: 90rem) {
	nav [data-type="easy-to-read"] {
		position: absolute;
	}
}

nav [data-type="easy-to-read"] img {
	border-radius: 1rem 0 0 1rem;
}

#sinuga {
	display: none;
}

.author-audio-container {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.audio-toggle {	
	display: flex; 
	justify-content: center;
	align-items: center; 
	width: fit-content;
	max-height: 2.5rem; 
	padding: 0.5rem 1rem;	
	cursor: pointer; 
	background-color: var(--bg-color); 
	border-radius: 0.5rem; 
	font-weight: 700;
	-webkit-user-select: none; 
	-ms-user-select: none;
	user-select: none; 	
}

.audio-img {
	margin-right: 0.75rem;
}

.audio-player {
	display: none;
}

/*PLYR START*/
.plyr--video {
	border-radius: unset!important;
}

.plyr__controls	{
	color: var(--primary-color)!important;
	background: var(--bg-color)!important;
	background-color: var(--bg-color)!important;
	border-radius: 0.5rem!important;
}

.plyr--video .plyr__controls {
	padding-top: 1rem!important;
	border-radius: unset!important;
	
}

.plyr--full-ui input[type=range] {
	color: var(--primary-color)!important;
}

.plyr__progress__buffer {
	color: var(--bg-color-opposite)!important;
}

.plyr__menu__container {
	z-index: 9997!important;
}
/*PLYR END*/

/*TOBII START*/
.tobii__slider {
	top: 0;
	z-index: 9998;
}

.tobii,
.tobii__slide,
.tobii-image {
	z-index: 9998;
}

.tobii__btn {
	color: var(--error-color);
	background-color: var(--info-color);
	border: unset;
	cursor: pointer;
	border-radius: 0.5rem;
	outline: unset;
	z-index: 9999;
}

.tobii__btn--close {
	top: 1rem;
	right: 1rem;
}

.tobii__btn:hover {
	cursor: pointer;
}
/*TOBII END*/

@media only screen and (max-width: 825px) {
	.author-audio-container {
		flex-direction: column;
	}	

	.audio-toggle {
		margin-left: 0; 
	}				
}

/*FOOTER START*/
footer {
	display: flex;
	flex-direction: column;
	gap: 3rem;
	padding: 3rem;
	background-color: var(--primary-color);
	color: var(--secondary-font-color);
}

@media only screen and (max-width: 62rem) {
	footer {
		padding: 1.5rem 1rem 1rem 1rem;
	}
}

footer > div:first-child {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;	
    align-items: stretch;
	gap: 2rem;
}

footer > div:first-child > div {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: fit-content;
	max-width: 40rem;
}

footer > div:first-child > div:not(:first-child) {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;	
	gap: 2rem;
}

footer > div:first-child > div:not(:first-child) > div {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	line-height: 1.75;	width: fit-content;
	max-width: 20rem;
}

footer > div:first-child > img {
	align-self: flex-start;
	width: 150px;
	height: auto;
}

#back-to-top {
	position: relative;
	bottom: 1rem;
	left: 0;
	z-index: 9997;
}

#back-to-top.show {
	position: fixed;
	right: 1.5rem;
	left: unset;
}

[data-type="button"] {
	display: flex;
	justify-content: center;
	align-items: center;	
	flex-direction: row;
	gap: 0.75rem;
	background-color: var(--primary-color);
	color: var(--secondary-font-color);
	padding: 0.625rem calc(var(--spacing-medium) + 0.5rem);
	border: calc(var(--spacing-xx-small) / 2) solid var(--primary-color);
	border-radius: 1.875rem;
	font-weight: 700;
	text-decoration: unset;
	width: fit-content;
	height: fit-content;
	transition-duration: 200ms;
	-webkit-user-select: none; 
	-ms-user-select: none;
	user-select: none; 
}

[data-accessibility~="button"] [data-type="button"] {
	padding: 1rem calc(var(--spacing-medium) + 1rem);
	font-size: 1.5rem;
}

[data-type="button"]:hover {
	background-color: var(--bg-alt-color);
	color: var(--primary-color);
	transition-duration: 200ms;
	cursor: pointer;
}

footer [data-type="button"] {
	color: var(--primary-color);
	background-color: var(--alt-font-color);
	border-color: var(--alt-font-color);
}

footer [data-type="button"]:hover {
	background-color: var(--primary-color);
	color: var(--alt-font-color);
}

footer form {
	display: flex;
	gap: 1rem;
}

footer input {
	width: 100%;
	border: 2px solid var(--alt-font-color);
	border-radius: 1.875rem;
}

[data-type*="article-container"] {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: auto;
	padding: 0 2rem 2rem 2rem;
	background-color: var(--bg-color-alt);
	margin-top: 2rem;
	margin-bottom: 4rem;
	border-radius: 1rem;
}

@media only screen and (max-width: 100rem) {
	[data-type*="article-container"] {
		margin-top: 9rem;
	}
}

@media only screen and (max-width: 62rem) {
	[data-type*="article-container"] {
		padding: 0 1rem 2rem 1rem;
	}
}

@media only screen and (max-width: 56rem) {
	[data-type*="article-container"] {
		border-radius: unset;
		margin-bottom: unset;
	}
}

@media only screen and (max-width: 45rem) {
	[data-type*="article-container"] {
		margin-top: 8.25rem;
	}
}

[data-type="article-title"] {
	z-index: 1400;
	position: sticky;
	top: 0.75rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
	background-color: var(--bg-color-alt);
	border-bottom: 2px solid var(--bg-color);
}

[data-type="article-title"] h1 {
	white-space: break-spaces;
}

@media only screen and (max-width: 50rem) {
	[data-type="article-title"] {
		padding-top: 0.5rem;
	}
}

@media only screen and (max-width: 120rem) {
	[data-type="article-title"] {
		position: relative;
		top: unset;
	}
}

[data-type="article-information"] {
    display: flex;
    flex-direction: row;
}

[data-type="article-information"] [data-type="author"] {
    flex: 1 1 auto;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem 0 0 0.5rem; 
    background-color: var(--bg-color);
}

[data-type="article-information"]:has([data-type="author"]:only-child) [data-type="author"] {
    flex: 0 1 fit-content;
    border-radius: 0.5rem;
}

[data-type="article-information"] [data-type="author"] span {
	-webkit-user-select: none; 
	-ms-user-select: none;
	user-select: none; 	
}

[data-category] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-weight: 700;
    width: fit-content;
    padding: 0.5rem 1rem;
    border-radius: 0 0.5rem 0.5rem 0;
    background-color: var(--bg-color);
	-webkit-user-select: none; 
	-ms-user-select: none;
	user-select: none; 		
}

@media only screen and (max-width: 48rem) {
	[data-type="article-information"] {
		flex-direction: column;
	}
	
	[data-type="article-information"] [data-type="author"] {
		order: 2;
		flex: 1;
		border-radius: 0 0 0.5rem 0.5rem;
	}	
	
	[data-category] {
		order: 1;
		flex: 1;
		flex-shrink: unset;
		justify-content: flex-start;
		width: 100%;
		text-align: left;
		border-radius: 0.5rem 0.5rem 0 0;
	}
}

[data-type*="readable-area"] {
	max-width: 50rem;
}

[data-type*="readable-area"] a {
	color: var(--primary-color);
	line-break: auto;
	padding-right: unset;
}

[data-type*="readable-area"] a:not(:where(
	[href^="#"],
	[href^="/"]:not([href^="//"]),
	[href^="mailto:"],
    a[href^="mailto:"],
	[href^="tel:"],
	[href^="http://epikoda.test"],
	[href^="https://epikoda.test"],
	[href^="https://test.epikoda.ee"],
	[href^="https://epikoda.ee"],
	[href^="https://www.epikoda.ee"],
	[href^="https://sinuga.epikoda.ee"],
	[href^="https://ajakiri.epikoda.ee"],
	[href^="https://www.sinuga.epikoda.ee"],
	[href^="https://www.ajakiri.epikoda.ee"],
	[href*="javascript:void(0);"],
    figure > a,
    [data-type="button"],
    [data-type="info_block"] a,
    [data-type="highlight-item"] a,
    [data-type="reference-list"] a,
	[data-type="article-share"] a,
    #accessibilityButton,
    .wp-block-button a
)):after {
	content: "";
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	background-image: url(../img/newtab.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	margin-bottom: -0.5rem;
	margin-left: 0.2rem!important;
}

[data-type*="readable-area"] a:hover {
	text-decoration: underline;
	text-underline-offset: var(--spacing-tiny);
	text-decoration-thickness: calc(var(--spacing-xx-small) / 2);	
}

[data-type*="readable-area"] ul {
	list-style-type: disc;
	padding-inline-start: var(--spacing-normal);
	margin-top: unset;
	margin-bottom: var(--spacing-small);
}

[data-type*="readable-area"] .sitemap ul li a {
	color: var(--primary-font-color);
	text-decoration: none;
}

[data-type*="readable-area"] .sitemap ul li a::after {
	display: none;
}

[data-type*="readable-area"] .sitemap ul li a:hover {
	text-decoration: underline;
}

[data-type*="readable-area"] ul li::marker {
	font-size: var(--spacing-normal);
}

[data-type*="readable-area"] > h2:first-child {
    margin-bottom: 1rem;	
}

[data-type*="readable-area"] p:not(:last-child) {
    margin-bottom: 1rem;
}

[data-type*="readable-area"] blockquote {
	text-indent: 2rem;
	font-family: var(--title-font);
	font-size: 1.5rem;
	text-align: left;
}

[data-type*="readable-area"] blockquote p {
	display: inline;
	padding: 0.3rem 1rem;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

[data-type*="readable-area"] blockquote:not(:last-child) {
    margin-bottom: 1.5rem;
}

[data-type*="readable-area"] hr {
    border-top: 2px solid var(--bg-color);
	border-bottom: 0;
	border-left: 0;
	border-right: 0;	
}

[data-type*="readable-area"] hr:has(+ #easy-to-read) {
    margin-top: 2rem;
}

[data-type*="readable-area"] p:has(+ ul),
[data-type*="readable-area"] p:has(+ ol) {
    margin-bottom: unset!important;
}

[data-type*="readable-area"] p + h1,
[data-type*="readable-area"] p + h2,
[data-type*="readable-area"] p + h3,
[data-type*="readable-area"] p + h4,
[data-type*="readable-area"] div + h1,
[data-type*="readable-area"] div + h2,
[data-type*="readable-area"] div + h3,
[data-type*="readable-area"] div + h4,
[data-type*="readable-area"] ul + h1,
[data-type*="readable-area"] ul + h2,
[data-type*="readable-area"] ul + h3,
[data-type*="readable-area"] ul + h4,
[data-type*="readable-area"] ol + h1,
[data-type*="readable-area"] ol + h2,
[data-type*="readable-area"] ol + h3,
[data-type*="readable-area"] ol + h4,
[data-type*="readable-area"] figure + h1,
[data-type*="readable-area"] figure + h2,
[data-type*="readable-area"] figure + h3,
[data-type*="readable-area"] figure + h4,
[data-type*="readable-area"] blockquote + h1,
[data-type*="readable-area"] blockquote + h2,
[data-type*="readable-area"] blockquote + h3,
[data-type*="readable-area"] blockquote + h4 {
	margin-top: 2rem;
	margin-bottom: 0.5rem;
}

[data-type="info-block"] {
	padding: 1rem;
	background-color: var(--surface-alt-color);
	border-radius: 1rem;
}

[data-type="info-block"] > *:last-of-type {
	margin-bottom: 0;
}

[data-type="info-block"]:not(:last-child) {
	margin-bottom: 1rem;
}

[data-type*="readable-area"] [data-type="easy-to-read"] {
	padding: 1rem;
	margin-top: 2rem;
	border: 4px solid var(--primary-color);
	border-radius: 1rem;
	background-color: var(--bg-color-opposite);
	color: var(--secondary-font-color);
	width: fit-content;
}

[data-type*="readable-area"] [data-type="easy-to-read"] div:first-child {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 100%;
	background-color: var(--primary-color);
	border-radius: 1rem;
	margin-bottom: 1rem;
}

[data-type*="readable-area"] [data-type="easy-to-read"] img {
	width: 8rem;
}

[data-type*="readable-area"] figure:not(:last-child) {
    margin-bottom: var(--spacing-normal);
}

[data-type*="readable-area"] img,
[data-type*="readable-area"] figure img {
	border-radius: var(--spacing-x-small);
}

[data-type*="readable-area"] figure.is-style-rounded img {
	border-radius: 9999px;
    aspect-ratio: 1;
	object-fit: cover;	
}

[data-type*="readable-area"] [data-type="featured"] {
	padding: var(--spacing-normal);
	background-color: var(--bg-color);
	border-radius: var(--spacing-x-small);
}

[data-type*="readable-area"] [data-type="featured"]:not(:last-child) {
	margin-bottom: var(--spacing-normal);
}

[data-type="article-share"] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
	gap: 1rem;
	margin-top: 2rem;
	border-top: 2px solid var(--bg-color);
	padding-top: 2rem;
}

[data-type="article-share"] a:hover {
	opacity: 0.8;
}

[data-type="article-share"] a {
	background-color: var(--bg-color-opposite);
	display: flex;
	justify-content: center;
	border-radius: 5px;
}

[data-type="article-share"] a img {
	background-color: var(--bg-color-alt);
	border-radius: 0;
	width: 50px;
	height: 50px;
	filter: none;
}

figcaption {
	font-family: var(--title-font);
	font-size: 0.9rem;
	opacity: 0.75;
	margin-left: 0.5rem;
	margin-right: 0.5rem;
	margin-top: 0.5rem;
}

[data-quote-category] p {
	background-color: var(--bg-color-opposite);
	color: var(--secondary-font-color);
}

/* Editorial & Opinion */
[data-category="juhtkiri"],
[data-quote-category="juhtkiri"] p {
	background-color: #2d2c71;
}
[data-category="kolumn"],
[data-quote-category="kolumn"] p {
	background-color: #4c4ba8;
}
[data-category="arvamus"],
[data-quote-category="arvamus"] p {
	background-color: #6565cc;
}
[data-category="reportaaz"],
[data-quote-category="reportaaz"] p {
	background-color: #7d7ddc;
}
[data-category="retroperspektiiv"],
[data-quote-category="retroperspektiiv"] p {
	background-color: #9393e1;
}
[data-category="intervjuu"],
[data-quote-category="intervjuu"] p {
	background-color: #a7a7e7;
}

/* Personal Stories & Experiences */
[data-category="persoon"],
[data-quote-category="persoon"] p {
	background-color: #b5f279;
}
[data-category="elu_lugu"],
[data-quote-category="elu_lugu"] p {
	background-color: #a4db67;
}
[data-category="uks_paev"],
[data-quote-category="uks_paev"] p {
	background-color: #8fc453;
}
[data-category="kogemus"],
[data-quote-category="kogemus"] p {
	background-color: #7aab3f;
}
[data-category="teekond"],
[data-quote-category="teekond"] p {
	background-color: #66952f;
}
[data-category="lein"],
[data-quote-category="lein"] p {
	background-color: #516c24;
}

/* Support & Guidance */
[data-category="tugipunkt"],
[data-quote-category="tugipunkt"] p {
	background-color: #f2e679;
}
[data-category="tugiprogrammid"],
[data-quote-category="tugiprogrammid"] p {
	background-color: #e6d463;
}
[data-category="abikasi"],
[data-quote-category="abikasi"] p {
	background-color: #d9c84d;
}
[data-category="nouanded"],
[data-quote-category="nouanded"] p {
	background-color: #cba935;
}
[data-category="praktiline"],
[data-quote-category="praktiline"] p {
	background-color: #bd9a21;
}
[data-category="heategevus"],
[data-quote-category="heategevus"] p {
	background-color: #af8b12;
}

/* Education & Training */
[data-category="haridus"],
[data-quote-category="haridus"] p {
	background-color: #79a9f2;
}
[data-category="koolitus"],
[data-quote-category="koolitus"] p {
	background-color: #6796d1;
}

/* Research, Science & Medicine */
[data-category="uuring"],
[data-quote-category="uuring"] p {
	background-color: #f27979;
}
[data-category="teadus"],
[data-quote-category="teadus"] p {
	background-color: #e16f6f;
}
[data-category="geneetika"],
[data-quote-category="geneetika"] p {
	background-color: #cc6565;
}
[data-category="harvikhaigused"],
[data-quote-category="harvikhaigused"] p {
	background-color: #b95a5a;
}
[data-category="personaalsmeditsiin"],
[data-quote-category="personaalsmeditsiin"] p {
	background-color: #a34e4e;
}

/* Rights, Law & Advocacy */
[data-category="huvikaitse"],
[data-quote-category="huvikaitse"] p {
	background-color: #f279d0;
}
[data-category="oigused"],
[data-quote-category="oigused"] p {
	background-color: #de6ac8;
}
[data-category="seadusandlus"],
[data-quote-category="seadusandlus"] p {
	background-color: #c760b9;
}
[data-category="ligipaasetavus"],
[data-quote-category="ligipaasetavus"] p {
	background-color: #ae57a7;
}

/* Children & Youth */
[data-category="noored"],
[data-quote-category="noored"] p {
	background-color: #f2b379;
}
[data-category="puudega_laps"],
[data-quote-category="puudega_laps"] p {
	background-color: #dda263;
}

/* Care & Health Systems */
[data-category="hoolekanne"],
[data-quote-category="hoolekanne"] p {
	background-color: #5ec0a9;
}
[data-category="patsient"],
[data-quote-category="patsient"] p {
	background-color: #67c4cc;
}
[data-category="epikoja_tegemised"],
[data-quote-category="epikoja_tegemised"] p {
	background-color: #54a9b8;
}
[data-category="koroonaviirus"],
[data-quote-category="koroonaviirus"] p {
	background-color: #43909e;
}

/* Analytical & In-Depth */
[data-category="luubi_all"],
[data-quote-category="luubi_all"] p {
	background-color: #79cdf2;
}
[data-category="teoksil"],
[data-quote-category="teoksil"] p {
	background-color: #5db1e6;
}
[data-category="variraport"],
[data-quote-category="variraport"] p {
	background-color: #42a0d9;
}

/* Society & Community */
[data-category="kogukond"],
[data-quote-category="kogukond"] p {
	background-color: #79e3f2;
}
[data-category="vorgustik"],
[data-quote-category="vorgustik"] p {
	background-color: #67c9e6;
}
[data-category="piirkond"],
[data-quote-category="piirkond"] p {
	background-color: #54b0d9;
}
[data-category="riik"],
[data-quote-category="riik"] p {
	background-color: #4295c2;
}
[data-category="rahvusvaheline"],
[data-quote-category="rahvusvaheline"] p {
	background-color: #3b7eb3;
}

/* Funding & Projects */
[data-category="rahastus"],
[data-quote-category="rahastus"] p {
	background-color: #e8f279;
}
[data-category="piloot"],
[data-quote-category="piloot"] p {
	background-color: #c9d957;
}

/* Culture & Lifestyle */
[data-category="kultuur"],
[data-quote-category="kultuur"] p {
	background-color: #b579f2;
}
[data-category="sport"],
[data-quote-category="sport"] p {
	background-color: #a667d1;
}
[data-category="too"],
[data-quote-category="too"] p {
	background-color: #925bb9;
}
[data-category="vaba_aeg"],
[data-quote-category="vaba_aeg"] p {
	background-color: #7f49a0;
}
[data-category="ajalugu"],
[data-quote-category="ajalugu"] p {
	background-color: #6d3b88;
}
[data-category="oluline"],
[data-quote-category="oluline"] p {
	background-color: #5b2e6f;
}

[data-category="juhtkiri"],
[data-category="kolumn"],
[data-category="arvamus"],
[data-category="reportaaz"],
[data-category="retroperspektiiv"],
[data-category="intervjuu"],
[data-category="lein"],
[data-category="kogemus"],
[data-category="teekond"],
[data-category="patsient"],
[data-category="epikoja_tegemised"],
[data-category="koroonaviirus"],
[data-category="teadus"],
[data-category="geneetika"],
[data-category="harvikhaigused"],
[data-category="personaalsmeditsiin"],
[data-category="seadusandlus"],
[data-category="oigused"],
[data-category="ligipaasetavus"],
[data-category="sport"],
[data-category="too"],
[data-category="vaba_aeg"],
[data-category="ajalugu"],
[data-category="oluline"],
[data-category="hoolekanne"],
[data-quote-category="juhtkiri"] p,
[data-quote-category="kolumn"] p,
[data-quote-category="arvamus"] p,
[data-quote-category="reportaaz"] p,
[data-quote-category="retroperspektiiv"] p,
[data-quote-category="intervjuu"] p,
[data-quote-category="lein"] p,
[data-quote-category="kogemus"] p,
[data-quote-category="teekond"] p,
[data-quote-category="patsient"] p,
[data-quote-category="epikoja_tegemised"] p,
[data-quote-category="koroonaviirus"] p,
[data-quote-category="teadus"] p,
[data-quote-category="geneetika"] p,
[data-quote-category="harvikhaigused"] p,
[data-quote-category="personaalsmeditsiin"] p,
[data-quote-category="seadusandlus"] p,
[data-quote-category="oigused"] p,
[data-quote-category="ligipaasetavus"] p,
[data-quote-category="sport"] p,
[data-quote-category="too"] p,
[data-quote-category="vaba_aeg"] p,
[data-quote-category="ajalugu"] p,
[data-quote-category="oluline"] p,
[data-quote-category="hoolekanne"] p {
    color: var(--secondary-font-color); 
}

[data-category="persoon"],
[data-category="elu_lugu"],
[data-category="uks_paev"],
[data-category="tugipunkt"],
[data-category="tugiprogrammid"],
[data-category="abikasi"],
[data-category="nouanded"],
[data-category="praktiline"],
[data-category="heategevus"],
[data-category="haridus"],
[data-category="koolitus"],
[data-category="uuring"],
[data-category="huvikaitse"],
[data-category="luubi_all"],
[data-category="teoksil"],
[data-category="variraport"],
[data-category="kogukond"],
[data-category="vorgustik"],
[data-category="piirkond"],
[data-category="riik"],
[data-category="rahvusvaheline"],
[data-category="rahastus"],
[data-category="piloot"],
[data-category="kultuur"],
[data-quote-category="persoon"] p,
[data-quote-category="elu_lugu"] p,
[data-quote-category="uks_paev"] p,
[data-quote-category="tugipunkt"] p,
[data-quote-category="tugiprogrammid"] p,
[data-quote-category="abikasi"] p,
[data-quote-category="nouanded"] p,
[data-quote-category="praktiline"] p,
[data-quote-category="heategevus"] p,
[data-quote-category="haridus"] p,
[data-quote-category="koolitus"] p,
[data-quote-category="uuring"] p,
[data-quote-category="huvikaitse"] p,
[data-quote-category="luubi_all"] p,
[data-quote-category="teoksil"] p,
[data-quote-category="variraport"] p,
[data-quote-category="kogukond"] p,
[data-quote-category="vorgustik"] p,
[data-quote-category="piirkond"] p,
[data-quote-category="riik"] p,
[data-quote-category="rahvusvaheline"] p,
[data-quote-category="rahastus"] p,
[data-quote-category="piloot"] p,
[data-quote-category="kultuur"] p {
    color: var(--primary-font-color); 
}

[data-type="progress-container"] {
	position: fixed;
	z-index: 1000;
	width: 100%;
	height: 0.75rem;
	background-color: var(--bg-color);	
}

#feature-read-progress {
	display: block;
	background: var(--success-color);
	height: 0.75rem;
	left: 0;
	top: 0;

}