/*** app.css */

/*** CSS variables */
:root { 
	--focus: transparent; /* disable buttons outline:; or change its color */
	--globalScale: 1.2; /* change body font size */
	--hScale: 1.0; /* change headings font size */

	--siteMarge: 5rem;
	--siteMargeXs: 20px;

	--primary: #FD4600;
	--linkHover: #FD4600;

 	--fontFamily: barna, barna-fallback, sans-serif, var(--fontFallback);
	--fontFamilyVar: barna, barna-fallback, sans-serif, var(--fontFallback);
	--hFontFamily: var(--fontFamily);

	--h1Size: calc(calc(var(--hScale) + 0.4) * clamp(3.1rem, 3.1rem + ((1vw - 7.77rem) * 6.4516), 4.7rem));
	--navSize: 1.4rem;
	--footerSize: 1.4rem;

	--tableBorderColor: #eee;
}



@supports (font-variation-settings: normal) { :root { --fontFamily: var(--fontFamilyVar); } } /* If Variable fonts are supported */
a, a:hover { --linkDecoration: none; --linkDecorationHover: none } /* remove underline from links */


@font-face{font-family:barna;src:url("//static-cdn.arte.tv/static/fonts/barna-web/woff2/Barna-Light.woff2"),url("//static-cdn.arte.tv/static/fonts/barna-web/woff/Barna-Light.woff");font-style:normal;font-weight:100;font-display:swap;}@font-face{font-family:barna-fallback;src:local("Arial");font-style:normal;font-weight:100;size-adjust:83%;}@font-face{font-family:barna;src:url("//static-cdn.arte.tv/static/fonts/barna-web/woff2/Barna-Regular.woff2"),url("//static-cdn.arte.tv/static/fonts/barna-web/woff/Barna-Regular.woff");font-style:normal;font-weight:400;font-display:swap;}@font-face{font-family:barna-fallback;src:local("Arial");font-style:normal;font-weight:400;size-adjust:84%;}@font-face{font-family:barna;src:url("//static-cdn.arte.tv/static/fonts/barna-web/woff2/Barna-SemiBold.woff2"),url("//static-cdn.arte.tv/static/fonts/barna-web/woff/Barna-SemiBold.woff");font-style:normal;font-weight:600;font-display:swap;}@font-face{font-family:barna-fallback;src:local("Arial");font-style:normal;font-weight:600;size-adjust:84%;}@font-face{font-family:barna;src:url("//static-cdn.arte.tv/static/fonts/barna-web/woff2/Barna-Bold.woff2"),url("//static-cdn.arte.tv/static/fonts/barna-web/woff/Barna-Bold.woff");font-style:normal;font-weight:700;font-display:swap;}@font-face{font-family:barna-fallback;src:local("Arial");font-style:normal;font-weight:700;size-adjust:92%;}

/* custom */
header { z-index: 9999; padding-left: var(--siteMarge); padding-right: var(--siteMarge); background-color: var(--white); }
header .logo > img { height: 80px; }
header x-col.second { text-align: right; }
header .logo { display: inline-block; }
footer { padding: var(--siteMarge) 2rem var(--siteMarge) 0rem; text-align: center; margin-left: auto; margin-right: auto; }
footer p { font-size: var(--footerSize); line-height: 1.6rem; }
footer x-col a { margin-left: 10px; margin-right: 10px; }
.lightswitch { z-index: 9999; border-radius: var(--space-5); }
ul li::marker { color: var(--primary); }
button:hover { transform: scale(1.1); }
button, button:hover { transition: all 0.1s ease-in-out; }
table { margin-left: 0px; border-bottom: 1px solid var(--tableBorderColor); border-collapse: collapse; }
table th { border-radius: 0px !important; }
table tr td { border-right: 1px solid var(--tableBorderColor); border-left: 1px solid var(--tableBorderColor); }
a.button.skipTo { background-color: #000; color: #fff; border-color: #000; }
.main-content { padding: var(--siteMarge) 2rem var(--siteMarge) 0rem; margin-left: 300px; margin-right: auto; }
.main-content, footer { max-width: 960px; }
.main-content h1 { margin-bottom: 0px; }
.main-content h2 { margin-top: 5rem; scroll-margin-top: 120px; }
.main-content h3, .main-content .h3 { margin-top: 2.6rem; }
.main-content span.h3 { display: block; }
.main-content .h5 { font-weight: var(--fontStyle); }
.main-content p, .main-content ul { margin-bottom: 5rem; line-height: calc(var(--fontLine) + 0.8rem); }
.main-content p.mb-small { margin-bottom: 2rem; }
.main-content li { margin-block-end: var(--liMargin); }
.main-content table { margin-bottom: 5rem; }
.content-nav { position: fixed; left: 0px; top: 140px; max-width: 244px; padding: 40px 0px 10px 68px; margin-bottom: 0px;
	border-top-right-radius: 4px; border-bottom-right-radius: 4px;
	font-size: var(--navSize); box-sizing: border-box; }
.content-nav.closed { left: -300px; }
.content-nav ul { list-style: none outside; }
.content-nav ul li { line-height: 1rem; margin-bottom: 10px; margin-block-end: 10px; }
.content-nav a { text-decoration: none; line-height: 1.6rem; position: relative; }
.content-nav a.active { text-decoration: underline; }
.content-nav a.active:before { display: block; position: absolute; left: -40px; top: 3px; width: 32px; height: 20px; text-align: center;
	content: "\f178"; font-family: "Font Awesome 6 Free"; font-weight: 900; -webkit-font-smoothing: antialiased; font-style: normal; font-variant: normal; line-height: 1; text-rendering: auto; }
.content-nav a.active:hover:before { color:#000; }
.content-nav .nav-button { position: fixed; left: 0px; top: 130px; width: 50px; color: #000; background-color: #eee; border-radius: 0px var(--space-5) var(--space-5) 0px; margin: 0px;}
.content-nav .nav-button:hover { background-color: #eee; }
.content-nav .nav-button i { transform: rotate(-90deg); }
.content-nav.closed .nav-button i { transform: rotate(90deg); }
.content-nav, .content-nav .nav-button i { transition: all 0.2s ease-in-out; }

:where(a,[role="link"]):not(.button,[role="button"]) {
	color: var(--color); text-decoration: underline;
}
:where(a,[role="link"]):not(.button,[role="button"]):hover {
	text-decoration: underline;
}

/* dark mode */
:where(.dark-mode, #dark-mode, [dark-mode], [data-mode="dark"]) {
	header { background-color: var(--black); }
	table thead th { background-color: var(--black); }
}



/* ------------------
  media query
------------------ */
@media (prefers-reduced-motion: reduce) {} /* User prefers NO motion-based animation */

/*** Detect OS Dark/Light mode */
@media (prefers-color-scheme: dark) {} /* if OS in DARK mode */
@media (prefers-color-scheme: light) {} /* if OS in LIGHT mode */

/*** Responsive */
/** Skelet. BREAKING POINTS */
@media (max-width: 777px) {
	header { padding-left: var(--siteMargeXs); padding-right: var(--siteMargeXs); }
	footer { padding-left: var(--siteMargeXs); padding-right: var(--siteMargeXs); }
	.main-content { margin-left: auto; padding-left: var(--siteMargeXs); padding-right: var(--siteMargeXs); }
	.main-content h1 { font-size: calc(var(--h1Size) - 0.6rem); }
	.content-nav { display: none; }

	.table-wrapper { display: block; width: 100%; overflow-x: scroll; }
	table { table-layout:fixed; width: 200%; }
}
/* Grid SMALL becomes active */
@media (min-width: 778px) and (max-width: 1024px) {} /* Grid MEDIUM becomes active */

/** General breaking points */
/* Device = Most of Mobile (Portrait) | Screen = b/w 0 to 480px */
@media (max-width: 480px) {}
/* Device = Low Resolution Tablet, Mobile (Landscape) | Screen = b/w 481px to 767px */
@media (min-width: 481px) and (max-width: 767px) {}
/* Device = Tablet, iPad (landscape) | Screen = b/w 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {}
/* Device = Tablet, iPad (portrait) | Screen = b/w 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) {}
/* Device = Laptop, Desktop | Screen = b/w 1025px to 1280px */
@media (min-width: 1025px) and (max-width: 1280px) {}
/* Device = Desktop | Screen = 1281px to higher resolution desktops */
@media (min-width: 1281px) {}
/* Device = Desktop | Screen = 1599px huge resolution desktops */
@media (min-width: 1599px) {
	.main-content { margin-left: auto; }
}