/*
Theme Name: UbuntuPress
Author: Dirk Schmidtke
Author URI: http://www.dirkschmidtke.de/
Description: A tailor-made child theme of Portfolly by Dirk Schmidtke
Template: portfolly
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ubuntupress
*/

html,body{height:100%}

/* Header section */
#masthead {background-color:#E95420;padding:0;border-left:3.5em solid #000}
#ci {background-color:#E95420;color:#fff;padding:.8em 0;background:linear-gradient(180deg, #E95420 80%, #d95829)}
#ci .home-link {display:block;padding:0 .1em}
#site-navigation {margin-left:-3.5em}

.site-title, .site-description {font-family:var(--wp--preset--font-family--ubuntu-medium);line-height:1.45em}
.site-title {font-size:2.6em;margin-left:-.76em;letter-spacing:.03em}
.site-description {font-size:1.3em}

.custom-logo {position:absolute;left:.1em;top:.85em;font-size:1.2em;width:2.7em;height:auto;margin-right:.9em}
.admin-bar .custom-logo {top:calc(32px + .85em)}

/* Languages */
#lang_switch {position:absolute;top:5px;right:10px;z-index:4}
.admin-bar #lang_switch {top:52px}
#lang_switch ul {list-style-type:none;margin:0;padding:0;width:auto;text-align:center;white-space:nowrap}
.language-chooser-item {padding:0;display:inline-block;margin:1%;}
.language-chooser-item a {font-family:var(--wp--preset--font-family--ubuntu-medium);font-size:1.5em;color:#fff;padding-right:.3em;border-right:1px solid #fff;text-decoration:none;text-transform:uppercase}
.language-chooser-item:last-child a {border:0;padding-right:0}

/* Main menu */
#menu-main {padding:0}
#menu-main li {text-align:left;color:#fff;border-bottom:0;margin:0;padding:.5em 0 0 .3em;text-transform:uppercase;font-size:1.2em;line-height:2em}
#menu-main li a:before {display:inline-block;font-weight:700;vertical-align:middle;text-align:center;background-color:#39e;width:2.3em;line-height:2.3em;margin-right:.45em;border-radius:50%}
.de #menu-main li:nth-child(1) a:before {content:"K"}
.de #menu-main li:nth-child(2) a:before {content:"N";background-color:#93e}
.de #menu-main li:nth-child(3) a:before {content:"P";background-color:#e33}
.de #menu-main li:nth-child(4) a:before {content:"Ü";background-color:#396}
.en #menu-main li:nth-child(1) a:before {content:"C"}
.en #menu-main li:nth-child(2) a:before {content:"N";background-color:#93e}
.en #menu-main li:nth-child(3) a:before {content:"P";background-color:#e33}
.en #menu-main li:nth-child(4) a:before {content:"A";background-color:#396}

/* Main content */
main, #footer {overflow:hidden}
main {padding:0;border-left:3.5em solid #000}
.portfolio-header, header.entry-title, footer.entry-meta, .content {padding-right:1em; padding-left:.4em}
header.page-header, .portfolio-header {position:relative;background:#77216F}
h1.page-title, .portfolio-title {color:#fff;font-size:2.2em;font-family:var(--wp--preset--font-family--ubuntu-regular), sans-serif;line-height:1.3em}
header.page-header, .portfolio-header, header.entry-title, footer.entry-meta, .content {padding-left:2em}

.content {max-width:50em;margin:auto}
.content>* {font-size:var(--wp--preset--font-size--normal);line-height:1.5}
.page-id-2 .content {max-width:100%}

.post-thumbnail {background: #e9eff5}

h2.entry-title a {color:#77216F}
.post-meta, .entry-meta {color:#fff;line-height:1.4;font-size:.9375em}
.content p a {color:#d60}

.tag-links a {position:relative;display:inline-block;color:#fff;background:#f96;text-decoration:none;line-height:1.8em;padding:0 1.5em 0 2em;overflow:hidden}
.tag-links a::before {position:absolute;top:.58em;left:.9em;border-radius:50%;box-shadow: inset 0 .1em rgba(0, 0, 0, 0.25);content:'';height:.6em;width:.5em;background-color:#fff}
.tag-links a::after {position:absolute;top:0;right:0;border-bottom:.91em solid transparent;border-left:.7em solid #f96;border-top:.94em solid transparent;content:'';background-color:#fff}


#scroller {background:#e9eff5;padding:1em 4em;overflow:auto}

#footer {background-color:#468}
#menu-footer {margin:2em 0;color:#fff}
#menu-footer li {display:inline-block;padding:0 .5em}

/* front-page */
/* make up for missing hover button gutenberg support */
.wp-block-button__link:hover {
    background-color: var(--wp--preset--color--black);
    color: var(--wp--preset--color--white);
}
/* make catitems list without line-breaks */
.catitems > li {
	display: inline-block;
	padding: 0 .7em 0 0;
}


@media screen and (max-width:782px) {
	.admin-bar .custom-logo {top:calc(46px + .85em)}
	.admin-bar #lang_switch {top:66px}
	#site-navigation {position:relative}
	header.page-header, .portfolio-header {padding-top:1em;padding-bottom:.5em}

	/* Hamburger menu toggle */
	.toggle {position:absolute;z-index:5;display:inline-block;width:30px;height:20px;right:10px;bottom:-30px;cursor:pointer}
	.toggle span {position:absolute;left:0;right:0;height:4px;width:100%;background:#eee;transition:all 150ms;border-radius:2px}
	.t1 {top:0;width:100%;border-radius:2px}
	.t2 {top:50%;margin-top:-2px}
	.t3 {bottom:0;top: auto}

	#toggle:checked ~ .toggle .t1 {transform: rotate(45deg)}
	#toggle:checked ~ .toggle .t3 {transform: rotate(-45deg)}
	#toggle:checked ~ .toggle .t1,
	#toggle:checked ~ .toggle .t3 {width:30px;top:50%;left:50%;right:auto;margin-top:-2px;margin-left:-15px}
	#toggle:checked ~ .toggle .t2 {opacity:0;left:50%;width:0;right:50%}

	#toggle:checked ~ .menu-main-container {height:calc(100vh - 7.2em)}
	.menu-main-container {position:absolute;top:0;margin-left:3.5em;z-index:4;height:0;transition:height .7s ease-in-out;width:calc(100% - 3.5em);background:#E95420}
	#menu-main {margin-left:-3.5em;height:inherit;overflow:hidden}
}

@media screen and (min-width:783px) {
	#ci {height:8.5em;padding-bottom:0}
	.custom-logo {left:-2.8em}
  .admin-bar .custom-logo {top:.85em}

	#lang_switch {top:88px}
	.admin-bar #lang_switch {top:134px}

	header.page-header, .portfolio-header {padding-right:6em}
	header.page-header {height:7.5em;padding-bottom:1.8em}
	.portfolio-header {height:9.3rem}
	h1.page-title, .portfolio-title {padding:1.5rem 0 0 0;color:#fff;font-size:2.2em;font-weight:300;line-height:1.3em}
	.page-header .entry-meta {position:absolute;bottom:.4em;left:0;padding-left:inherit}
	.container .post-meta {display:inline-block;overflow:auto;height:4.6rem;padding:0 1rem 0 0}

	.entry-header {padding-top:0}
	main {border-left:0;min-height:calc(100vh - 5em)}

	#footer {
	    position: relative;z-index: 2;border-left: 3.5em solid #000
	}
}