/*
Theme Name: VillageGreen
Theme URI: n.a.
Author: Holger Löwenherz
Author URI: http://decocode.de/
Description: VillageGreen is a custom theme for prachttomate.de based on Radiate by ThemeGrill https://themegrill.com/themes/radiate/ .
Version: 0.1
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: villagegreen
Domain Path: /languages/
Tags: left-sidebar, custom-header, custom-background, custom-menu, custom-colors

*/

/* Top Secret - https://www.fontsquirrel.com/fonts/top-secret */
@font-face { font-family:logo; font-weight:bold; font-style:normal; src:url(/wp-content/themes/villagegreen/fonts/Top_Secret.ttf); }
/* Piedra - https://www.fontsquirrel.com/fonts/piedra */
@font-face { font-family:heading; font-weight:bold; font-style:normal; src:url(/wp-content/themes/villagegreen/fonts/Piedra-Regular.otf); }
/* JetBrains Mono - https://github.com/JetBrains/JetBrainsMono */
@font-face { font-family:body; font-weight:bold; font-style:normal; src:url(/wp-content/themes/villagegreen/fonts/JetBrainsMonoNL-ExtraBold.ttf); }
@font-face { font-family:body; font-weight:normal; font-style:italic; src:url(/wp-content/themes/villagegreen/fonts/JetBrainsMonoNL-Italic.ttf); }
@font-face { font-family:body; font-weight:bold; font-style:italic; src:url(/wp-content/themes/villagegreen/fonts/JetBrainsMonoNL-ExtraBoldItalic.ttf); }
@font-face { font-family:body; font-weight:normal; font-style:normal; src:url(/wp-content/themes/villagegreen/fonts/JetBrainsMonoNL-Regular.ttf); }

#outerbox  { display:grid; grid-template:auto / 350px auto; }
#sidebar   { grid-row:1; grid-column:1; }
main       { grid-row:1; grid-column:2; }
:root      {
--sat:50%;
--col1:125;  /* green */
--col2:55;   /* yellow */
--col3:55;   /* yellow */
--col4:220;  /* blue */
--col5:0;    /* red */
--col6:hsl(125,50%,25%);    /* medium green */
--col7:hsl(125,50%,10%);    /* dark green */
}

* { margin:0; padding:0; font-family:body,monospace; color:black; font-size:10px; }
html { scroll-behavior:smooth; }
body { background-image:linear-gradient(to right, hsl(var(--col1),var(--sat),45%) 0%, hsl(var(--col1),var(--sat),45%) calc(50% - 250px), hsl(var(--col2),var(--sat),65%) calc(50% - 251px), hsl(var(--col2),var(--sat),65%) 100%); overflow-x:auto; overflow-y:scroll; padding:20px 0; }
#outerbox { width:1200px; margin:auto; filter:drop-shadow(0px 0px 5px hsla(0,0%,100%,.0)); }
#sidebar { background-image:linear-gradient(to right, hsla(var(--col1),var(--sat),45%,1) 0%, hsla(var(--col1),var(--sat),45%,1) 100%); border-radius:20px; padding:10px 0 20px; }
#logo { text-align:center; transform:rotate(-7deg) translate(10px, -10px); }
#logo strong { font-family:logo,serif; font-size:60px; font-weight:normal; color:hsl(var(--col3),var(--sat),85%); line-height:1;
  text-shadow:
  -3px -3px 2px var(--col6),
  -3px  0px 2px var(--col6),
  -3px  3px 2px var(--col6),
   0px -3px 2px var(--col6),
   0px  3px 2px var(--col6),
   3px -3px 2px var(--col6),
   3px  0px 2px var(--col6),
   3px  3px 2px var(--col6);
}
#logo span { font-size:18px; font-weight:bold; vertical-align:-10px; }
#logo img { width:200px; }
#sidebar nav, #sidebar .menu-menu-2-container { margin-left:5px; }
#sidebar #nav2, #sidebar .menu-menu-2-container { margin-top:50px; }
#sidebar nav ul, #sidebar .menu-menu-2-container ul { list-style-type:none; margin-left:20px; line-height:2; }
#sidebar nav ul a, #sidebar .menu-menu-2-container ul a { color:hsl(var(--col1),var(--sat),100%); text-shadow:-2px -2px 1px hsla(0,0%,0%,.7); background-image:linear-gradient(to bottom, hsl(var(--col1),var(--sat),30%) 0%, hsl(var(--col1),var(--sat),20%) 100%); border-radius:4px; font-size:20px; padding:2px 10px; box-shadow:3px 3px 3px 1px hsla(0,0%,0%,.7); }
#sidebar nav ul a.aux, #sidebar .menu-menu-2-container ul a { color:hsl(var(--col1),var(--sat),100%); background-color:hsl(var(--col1),var(--sat),45%); border-radius:4px; font-size:15px; padding:2px 10px; box-shadow:none; }
#sidebar nav ul li ul, #sidebar nav ul li ul li ul { display:none; }
#sidebar nav ul li.current_page_item > ul, #sidebar nav ul li.current_page_ancestor > ul { display:block; }
#sidebar nav ul ul a { font-size:16px; padding:2px 10px; }
#sidebar nav ul a:hover, #sidebar nav li.current_page_item > a, #sidebar .menu-menu-2-container ul a:hover, #sidebar .menu-menu-2-container li.current_page_item > a { background-image:linear-gradient(to bottom, hsl(var(--col3),var(--sat),35%) 0%, hsl(var(--col3),var(--sat),25%) 100%); }
#sidebar #join { font-size:16px; padding:25px; }
#sidebar .widget_nav_menu h3 { display:none; }
#scrolltop { cursor:pointer; position:fixed; bottom:60px; right:30px; font-size:30px; font-weight:bold; color:hsla(0,0%,0%,.5); }
#scrolltop:before { content:'△'; }

#frontbanner { position:relative; height:240px; }
#frontbanner img, #frontbanner div { position:absolute; }
#frontbanner img { top:0; left:0; }
#frontbanner div { top:40px; left:40px; font-size:20px; font-weight:bold; color:white;
  text-shadow:
  -1px -1px 2px var(--col7),
  -1px  0px 2px var(--col7),
  -1px  1px 2px var(--col7),
   0px -1px 2px var(--col7),
   0px  1px 2px var(--col7),
   1px -1px 2px var(--col7),
   1px  0px 2px var(--col7),
   1px  1px 2px var(--col7);
}
#frontbanner div b { font-size:30px; font-family:heading,sans-serif; font-weight:normal; }
#ibox { display:none; position:fixed; top:0; left:0; width:100%; z-index:5; pointer-events:none; }
#info { pointer-events:auto; margin:auto; width:400px; text-align:center; background-color:hsl(var(--col5),var(--sat),50%); padding:4px 0; border-bottom:2px solid hsl(var(--col3),80%,70%); border-radius:0 0 10px 10px; }
#info a { color:hsl(var(--col3),80%,70%); font-size:16px; font-weight:bold; }
#validator { margin-top:30px; margin-left:30px; font-size:18px; opacity:.5; }

/* styles for sidebar widgets */
.widget_text { margin:60px auto 0; background-color:hsl(var(--col3),var(--sat),75%); width:300px; border:1px solid hsl(var(--col1),var(--sat),15%); border-radius:5px; box-shadow:3px 3px 3px 1px hsla(0,0%,0%,.7); }
.widget_text h3 { font-size:15px; text-align:center; color:hsl(var(--col3),var(--sat),85%); background-color:hsl(var(--col1),var(--sat),15%); border:6px solid hsl(var(--col1),var(--sat),15%); margin-left:-1px; width:291px; border-radius:5px 5px 0 0; }
.textwidget p { padding:10px 10px; font-size:16px; border-top:2px dotted hsl(var(--col1),var(--sat),15%); }
.textwidget p:nth-child(1) { border-top-width:0; }
.textwidget p b, .textwidget p strong { font-size:inherit; display:inline-block; width:100%; padding:0 4px; background-color:hsl(var(--col3),var(--sat),60%); margin-left:-4px; }
.textwidget a { color:hsl(var(--col4),100%,20%); }
.textwidget a:hover { text-decoration:underline; }
#text-3 { transform:rotate(2deg); }
#text-2 { transform:rotate(-2deg); }

#sidebar, main { box-shadow:0 0 10px 3px hsla(var(--col1),var(--sat),25%,0) inset; }
main { margin-top:10px; margin-bottom:10px; padding:30px 30px; background-image:linear-gradient(to left, hsla(var(--col2),var(--sat),65%,1) 0, hsla(var(--col2),var(--sat),65%,1) 350px, hsla(var(--col2),var(--sat),65%,1) 100%); border-radius:20px; }

main h1 { font-family:heading,sans-serif; font-size:40px; color:hsl(var(--col1),var(--sat),15%); text-shadow:3px 3px 2px hsla(0,0%,0%,.2); margin-top:10px; }
main h2 { font-family:heading,sans-serif; font-size:28px; color:hsl(var(--col1),var(--sat),15%); padding-top:25px; }
main h3 { font-size:22px; color:hsl(var(--col1),var(--sat),15%); padding-top:25px; }
main h4 { font-size:18px; color:hsl(var(--col1),var(--sat),15%); padding-top:25px; }
small { font-size:16px; }
a { text-decoration:none; }
a, b, i, strong, em { font-size:inherit; font-family:inherit; }
main h1 a, main h2 a, b, i, strong, em { color:inherit; }
main p { font-size:17px; padding-top:25px; line-height:1.3; overflow:auto; }
main p.subtitle { padding-top:8px; }
main p.ov { overflow:visible; }
main a { color:hsl(var(--col4),100%,20%); }
main a:hover { text-decoration:underline; }
main ul { margin-top:25px; margin-left:20px; }
main ol { margin-top:25px; margin-left:30px; }
main li { font-size:18px; margin-bottom:10px; }

.box { background-color:hsl(var(--col3),80%,70%); color:black; margin-top:25px; padding:15px 20px; border:2px solid hsl(var(--col5),var(--sat),50%); border-radius:10px; }
.button { background-color:hsl(var(--col4),var(--sat),40%); color:hsl(var(--col4),var(--sat),80%); border-radius:4px; padding:2px 10px; }
hr { margin-top:20px; border-width:0; border-top:2px dotted hsl(var(--col1),var(--sat),15%); }
.eot { margin-top:25px; text-align:center; font-size:60px; color:hsl(var(--col1),var(--sat),15%); border-top:2px dotted hsl(var(--col1),var(--sat),15%); }
.smallbutton, .search-submit { font-size:15px; color:hsl(var(--col3),var(--sat),85%); background-image:linear-gradient(to bottom, hsl(var(--col3),var(--sat),25%) 0%, hsl(var(--col3),var(--sat),15%) 100%); border-radius:6px; padding:4px 10px; border-width:0; cursor:pointer; }

/* styles for search form */
.search-form { margin-top:20px; }
.search-form label * { font-size:18px; }
.search-form .search-field { background-color:hsl(var(--col2),var(--sat),80%); color:hsl(var(--col2),var(--sat),10%); border:2px solid hsl(var(--col2),var(--sat),15%); border-radius:4px; padding:2px 6px; font-size:16px; }
.page-title span { font-size:inherit; font-family:inherit; }

/* styles for blog posts */
h2.entry-title { padding-top:40px; }
div.entry-meta { margin-top:5px; }
footer.entry-meta { margin-top:10px; }
.entry-date, .updated, .byline a, .cat-links a, .comments-link a, .more-link { font-size:14px; margin-right:20px; }
.updated, .byline { display:none; }
.more-link { vertical-align:-15px; }
.meta-nav { font-size:15px; font-weight:bold; }
.entry-meta, .more-link { margin-left:10px; }
.entry-meta .posted-on:before,
.entry-meta .updated:before,
.entry-meta .byline:before,
.entry-meta .cat-links:before,
.entry-meta .tags-links:before,
.entry-meta .comments-link:before,
.entry-meta .edit-link:before {
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font: normal 22px/1 'Genericons';
  vertical-align: -6px;
  color:hsl(var(--col1),var(--sat),30%);
}
.entry-meta .posted-on:before { content: '\f307'; }
.entry-meta .updated:before { content: '\f411'; }
.entry-meta .byline:before { content: '\f304'; }
.entry-meta .cat-links:before { content: '\f301'; }
.entry-meta .tags-links:before { content: '\f302'; }
.entry-meta .comments-link:before { content: '\f300'; }
.entry-meta .edit-link:before { content: '\f411'; }

/* styles for comments section */
.post-navigation { margin-top:4px; background-color:hsla(var(--col1),var(--sat),60%,0); padding:5px; }
.post-navigation * { font-size:14px; }
.post-navigation h3, .post-navigation div, .nav-links div { display:inline; }
.post-navigation h3.screen-reader-text, .paging-navigation h3.screen-reader-text { display:none; }
.nav-previous, .nav-next { background-color:hsl(var(--col1),var(--sat),60%); border-radius:4px; padding:5px 10px; }

#comments { margin-top:20px; }
h3.comments-title, h3.comment-reply-title { font-size:20px; margin-top:5px; margin-bottom:5px; }
h3.comments-title span { font-size:inherit; }
article.comment { background-color:hsl(var(--col1),var(--sat),70%); padding:10px; }

/* styles for image display */
.wp-block-image, .wp-block-gallery { margin-top:20px; }
.ileft { float:left; margin-right:20px; }
.iright { float:right; margin-left:20px; margin-right:6px; }
.frame,
.blocks-gallery-item img,
.wp-block-gallery img,
.wp-block-image:not(.is-style-rounded) img.frame { border:1px solid hsl(var(--col1),var(--sat),20%); border-radius:6px; margin-top:5px; margin-bottom:10px; box-shadow:3px 3px 3px 1px hsla(0,0%,0%,.7); }
.blocks-gallery-grid { margin-top:20px; }

#iv_overlay, #iv_box { position:fixed; z-index:4; top:0; left:0; width:100%; height:100%; }
#iv_overlay { background-color:black; opacity:.8; }
#imageviewer { pointer-events:auto; background-color:black; border:1px solid hsl(0,0%,30%); margin:10px auto; overflow:hidden; }
#iv_box { pointer-events:none; }

#iv_mode, #iv_count, #iv_close, #iv_prev, #iv_next, #iv_prev:before, #iv_next:before, #iv_content1, #iv_content2, #imageviewer img, #iv_cap1, #iv_cap2 { position:absolute; }
#iv_box1, #iv_box2, #imageviewer { position:relative; }
.preview img, #iv_mode, #iv_close, #iv_prev, #iv_next { cursor:pointer; }
main img:not(.x), #imageviewer a { cursor:url(/wp-content/themes/villagegreen/images/fullscreen2.svg) 11 11,crosshair; }
#iv_mode, #iv_close { font-family:Genericons,sans-serif; }

#iv_mode, #iv_count, #iv_close { top:10px; z-index:8; color:hsl(0,0%,80%); text-shadow:1px 0px 0px black, 0px 1px 0px black, -1px 0px 0px black, 0px -1px 0px black; font-size:20px; }
#iv_mode { left:10px; }
#iv_count { left:35px; top:12px; font-size:14px; }
#iv_close { right:10px; }
#iv_prev, #iv_next { background-color:hsl(0,0%,15%); opacity:0; transition:opacity .4s linear; width:100px; height:100%; z-index:7; }
#iv_prev { left:0; }
#iv_next { right:0; }
#iv_prev:before, #iv_next:before { font-size:40px; color:white; top:50%; }
#iv_prev:before { content:'◁'; left:35px; }
#iv_next:before { content:'▷'; right:35px; }
#iv_prev:hover, #iv_next:hover { opacity:.5; }

#iv_content1, #iv_content2 { left:0; width:100%; height:100%; transition:all .4s linear; }
#imageviewer img { left:50%; top:50%; transform:translate(-50%,-50%); }
#iv_cap1, #iv_cap2 { background-color:hsl(0,0%,10%); width:100%; height:30px; bottom:0; text-align:center; color:hsl(0,0%,70%); padding-top:10px; font-size:14px; }

/* styles for osm map */
.osm { display:inline-block; line-height:1.1; position:relative; }
.osm iframe { width:450px; height:350px; border:1px solid black; }
.osm a { position:absolute; top:11px; right:11px; background-color:white; border:2px solid hsl(0,0%,70%); border-radius:4px; width:30px; height:30px; }
.osm a:hover { background-color:hsl(0,0%,96%); }
.osm a img { box-shadow:none; border:none; position:absolute; top:4px; left:3px; }

/* WP styles */
.post-edit-link { font-size:14px; font-style:italic; border:1px solid grey; border-radius:4px; padding:0 8px; }

.wp-block-gallery {
    display: flex !important;
    flex-wrap: wrap !important;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.wp-block-gallery figure {
    margin: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
}
.wp-block-gallery figure {
    transform:scale(.95, .95);
}