/*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: 10000;

    /* 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*="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*="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*="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);
}

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"] {
    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="number-intro"] h1 div {
    position: relative;
    display: inline-block;
}

[data-type="number-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 {
		font-size: 15vw;
	}	
	
	[data-type="number-intro"] h1 div span {
		font-size: 3vw;
	}
}	

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

[data-type="number-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: 9998;
}

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

[data-type="number-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"] {
	display: flex;
	flex-direction: row;
	gap: 2rem;
	position: absolute;
	bottom: 0;
}

[data-type="number-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="number-intro"] [data-type="call-to-action"] img {
	width: 3rem;
	margin-top: -0.3rem;
}

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

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

    [data-type="number-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: 9999;
}

/*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: 9999;
	background-color: var(--primary-color);
	padding: 1rem 1rem 1rem 3rem;
	border-radius: 0 1rem 1rem 0;
	color: var(--secondary-font-color);
	text-decoration: none;
}

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

@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;
}

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

.audio-player {
	display: none;
}

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

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

.plyr--audio .plyr__progress__buffer {
	color: var(--bg-color-opposite);
}

.plyr__menu__container {
	z-index: 9999!important;
}

@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);
}

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;
	right: 1rem;
	z-index: 9999;
}

#back-to-top.show {
	position: fixed;
}

[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;
	}
}

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

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

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

[data-type="article-information"] [data-type="author"] {
    flex: 1 1 auto;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem 0 0 0.5rem; /* left rounded */
    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-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);
}

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

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

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

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

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

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

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

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

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

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

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

/* Culture & Lifestyle */
[data-category="kultuur"] {
	background-color: #b579f2;
}
[data-category="sport"] {
	background-color: #a667d1;
}
[data-category="too"] {
	background-color: #925bb9;
}
[data-category="vaba_aeg"] {
	background-color: #7f49a0;
}
[data-category="ajalugu"] {
	background-color: #6d3b88;
}
[data-category="oluline"] {
	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"] {
    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"] {
    color: var(--primary-font-color); 
}

[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*="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: 12px;	
}

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

[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"] 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 {
	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"]: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: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	user-select: none;
	margin-top: 4rem;
	border-top: 2px solid var(--bg-color);
	padding-top: 2rem;
}

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

[data-type="article-share"] a:not(:last-child) {
	margin-right: 10px;
}

[data-type="article-share"] a {
	background-color: var(--bg-color-opposite);
	width: 100%;
	line-height: 0;
	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-size: 1rem;
	opacity: 0.75;
	margin-left: 0.5rem;
	margin-right: 0.5rem;
	margin-top: 0.5rem;
}