/*
Theme Name: grosser
Theme URI: http://bengrosser.com/
Description: theme for bengrosser.com
Author: benjamin grosser
Version: 4.0
*/

:root {
  --border-line: 1px solid #555;
  --mid-dark: #aaa;
  --bg: #3d3d3d;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  margin: env(safe-area-inset);
  padding: env(safe-area-inset);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family:myriad-pro, sans-serif;
  font-weight:400;
}

 
h1, h2, h3 {
  /*
  font-family: jaf-bernino-sans, sans-serif;
  font-family: ibm-plex-mono;
  */

  font-family:ibm-plex-sans, sans-serif;
  font-weight:600;
}

body {
  background-color: var(--bg);
}

strong {
font-weight:600;
}

header {
  padding: 20px 20px;
  max-width: 800px;
  margin: 0 auto;
  background: var(--bg);
}

nav {
  border: 0px solid white;
}

nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  margin-right: 6px;
  margin-right: 0px; 
  padding:0;
  text-transform:lowercase;
}

nav h1 {
  display: inline;
  margin:0;
}

nav ul img {
  width: 36px;
  align-self: flex-end;
  margin-bottom: -8px;
  margin-right: 10px;
}

nav ul li {
  padding: 15px 0;
  cursor: pointer;
  border: 0px solid white;
  align-self: flex-end;
  padding:0;
  line-height:2.5rem;
}

nav ul li.menu-item {
  position: relative;
  width: auto;
  margin-left: 2rem;
  text-align: center;
  order: 3;
}

/* line under on hover */
nav ul li.menu-item:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 8px;
  height: 2px;
  width: 100%;
  background: #ddd;
  opacity:0; 
  pointer-events: none;
}

nav ul li.menu-item:hover:after {
  opacity: 1;
  bottom: 8px;
  pointer-events: none;
}

nav ul li a {
  color: #ccc;
  font-size: 1.1rem;
  text-decoration: none;
  width:100%;
  display:block;
}

nav ul li.current-menu-item a,
nav ul li.current_page_parent a,
nav ul li.current-page-ancestor a {
  color: #fff;
}

nav ul li:hover a {
  color: #eee;
}

nav ul li i {
  font-size: 1.4rem;
  margin-bottom: 0.21rem;
  padding:8px 8px 6px 8px; 
}

nav ul li.btn {
  display: none;
}

nav ul li.btn.hide i:before {
  content: "\f00d";
  pointer-events: none;
}

nav ul li.sitename {
  flex: 1;
  cursor: auto;
  user-select: none;
}

nav ul li.sitename a {
  color: #ddd; /* eee? */
  font-family:myriad-pro, sans-serif;
  font-size: 1.5rem;
  font-weight: 600; /* make sure this working for all fonts i'm trying */
  display: inline;
}

a {
  color: #daeafb;
  outline:none;
}

a:visited {
  color: #d2d7dd;
}

a:hover {
  color: #f0e6ac;
}

label {
  display: none;
}

section,
footer {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 20px;
}

section.project-body.projects-home,
section.project-body.blog-body.blog-home {
  padding-top:17px;
}

section img {
  width: 100%;
  height: auto;
  margin-bottom: 0px;
  display:block;
}

div.hero-meta {
  margin-bottom:8px;
  margin-top:4px;
  display:grid;
  grid-gap:20px;
  grid-template-columns: 1.5fr 1fr;
  font-size: 0.9rem;
}

.hero-meta a.caption {
  text-align: left;
}

.hero-meta a.seemore {
  text-align:right;
  display:block;
  text-decoration:underline;
  font-family:ibm-plex-sans, sans-serif;
  font-weight:400;
}

article h2 {
  font-size: 1rem;
  color: #d3d3d3;
  /* myriad pro */
  font-weight: 400;
  border-bottom: var(--border-line);
  margin-bottom: 8px;
  line-height: 1.5rem;
}

.home article h2 {
  font-family: myriad-pro, sans-serif;
}

article {
  margin-bottom: 20px;
  border: 0px solid white;
  width: 100%;
}

article.homeprojects {
  display: none;
}

article.homeprojects button {
    background-color:#365fa1;
    color:#eee;
    padding:16px 20px;
    border:1px solid #444;
    border-width:0;
    border-radius:34px;
    font-size:1.1rem;
    font-size:0.9rem;
    letter-spacing: 0.2rem;
    width:100%;
    margin:0 auto;
    text-transform:uppercase;
    font-family:ibm-plex-sans, sans-serif;
    font-weight:600;
}

article.homeprojects button:hover {
    background-color:#9f384b;
    text-decoration:underline;
    cursor:pointer;
}

p  {
  color: #b5b5b5;;
  color: #ccc;
}

section.home {
  display: grid;
  border: 0px solid white;
  grid-gap: 50px;
  grid-template-columns: 1fr 1fr 0.75fr;
}

section.home article p {
  font-size: 0.9rem;
  line-height: 1.1rem;
}

input.search {
  padding:4px 6px;
  border:0;
  font-size: 0.9rem;
  line-height:1.0rem;
  color:#ddd;
  background-color: #555;
  width: 100%;
}


/*
section.project-bigvideo,
section.project-bigimage {
  margin:0 auto;
  padding:20px;
  margin-top:20px;
  margin-bottom:20px;
  padding-bottom:4px;
}
*/

section.project-body h2, 
section.blog-body h2, 
section.blog-single h1, 
section.blog-home h2,
section.project-bigvideo h2,
section.project-bigimage h2 {
  color:#ccc;
  border-bottom: var(--border-line);
  margin-left:0;
  margin-right:0;
  margin-bottom:20px;
  margin-top:-4px;
  font-size:1.6rem;
  font-family:ibm-plex-sans, sans-serif;
  font-weight:600;
  line-height:1.8rem;
  padding-bottom:2px;
}

section div.bigvideo,
section div.bigimage {
  width:100%;
  margin-bottom:10px;
  margin-bottom:0;
}

section.project-body {
  margin-top:10px;
  margin-top:0px;
  border:0px solid white;
  display:grid;
  grid-template-columns:minmax(130px,1fr) 5fr; /* or 2fr 5fr ? */
  grid-gap:80px;
}

section.project-bigimage,
section.project-bigvideo {
  margin-top:14px;
}

section.project-bigvideo {
  padding-bottom:0;
}

section.project-body .tagline {
  color: #ffa0a0; 
  margin-top: 18px;
  padding-bottom:12px;
  font-size:1.0rem;
  display:block;
  line-height:1.2rem;
}

section.project-body p {
  margin:0px 0 20px 0;
}

section.project-body div.main h3,
section.blog-single div.entry-content h3 {
  color:#ddd;
  font-size:1.3rem;
  /* ibm plex sans */
  font-weight:500;
  font-weight:normal;
  margin:46px 0 8px;
  line-height:2rem;
}

section.project-body div.main.bigimage {
  margin:8px 0 8px;
}

section.project-body div.main.bigimage h3:nth-child(1) {
    margin-top:0;
}

section.project-body div.sidebar {
  font-size:0.9rem;
  margin-top:11px;
}

section.project-body div.sidebar-about {
  font-size:0.9rem;
  line-height:1.4rem;
}

section.project-body div.sidebar h3 {
  color:#ddd;
  font-size:0.9rem;
  font-weight:normal;
  font-family:myriad-pro, sans-serif;
  margin:3px 0 10px;
  line-height:1.5rem;
  border-bottom: var(--border-line);
  max-width:140px; /* ???? */
}

section.project-body div.sidebar-about h3:nth-child(1) {
  margin-top:-1px; 
}

section.project-body div.sidebar h3.project-menu {
  /*
  margin-top: 40px;
  */
}

section.project-body div.sidebox {
  margin-bottom:40px;
  font-size:0.8rem;
}

section.project-body div.main {
  color:#ccc;
  font-size:1rem;
  line-height:1.7rem;
  width:100%;
  margin-top:11px;
}

section.project-body img {
  width:100%;
  height: auto;
  margin:15px 0 0px;
  margin:0;
}

  section.project-bigimage img,
  section.project-bigvideo img,
  section.project-body img {
      /*
    margin:10px 0 8px;
    max-width: 99.03225806%; 
    width:100%;
    */
    height: auto;
  }

  section.project-bigimage div.bigimage img {
    margin-bottom:8px;
  }


section.project-body img.img-first {
  margin-top:0;
}

.sidebar img.project-logo {
  margin:40px 0 40px 0;
  max-width:130px;
}

section.project-body .wp-caption-text,
section.project-bigimage .wp-caption-text,
section.project-bigvideo .wp-caption-text, 
section.project-bigimage .wp-caption-text-right,
section.project-bigvideo .wp-caption-text-right {
  font-size:0.9rem;
  font-size:0.8rem;
  line-height:1.0rem;
  color:#bbb;
  color:var(--mid-dark);
  margin-bottom:40px;
  margin-bottom:0;
  margin-top:4px;
  width: 100% !important;
  text-align:right;
  font-family: ibm-plex-sans, sans-serif;
}


section.blog-body .wp-caption-text,
section.project-bigimage .wp-caption-text-right,
section.project-bigvideo .wp-caption-text-right {
  font-size:0.9rem;
  color:#aaa;
  color:var(--mid-dark);
  margin-bottom:30px;
  margin-top:-4px;
  width: 100% !important;
  margin-bottom:30px;
  margin-top:-4px;
  text-align:right;
  font-size:0.9rem;
  font-size:0.8rem;
  font-family: ibm-plex-sans, sans-serif;
}

section.blog-body .wp-caption-text {
  margin-top:4px;

}


section.project-bigimage .wp-caption-text-right {
  margin-bottom:0px;
  }

.wp-caption {
  margin-top:30px;
  margin-bottom:30px;
}

.wp-caption.short-top {
  margin-top:0;
}

.wp-caption.short-bottom {
  margin-bottom:0px;
}

.wp-caption.long-bottom {
  margin-bottom:50px;
}

.wp-caption.long-top {
  margin-top:50px;
}

section.blog-body .wp-caption, section.blog-single .wp-caption {
  margin-bottom:30px;
}

section.project-body button {
  background-color:#f4f4f4;
  background-color:#f4f4f4ea;
  margin-left: 0px; 
  margin-bottom: 24px;
  padding:10px 14px;
  border:1px solid #f4f4f4ea;
  font-family:ibm-plex-sans, sans-serif;
  font-weight:600;
  border-radius:4px;
  font-size:1rem;
  margin-bottom:15px;
  margin-top:5px;
}

section.project-body button:hover {
  cursor:pointer;
  background-color:#e4e4e4;
  background-color:#e4e4e4c4;
  background-color: #daeafbe7;
  border: 1px solid #daeafbe7;

}

section.project-body ul,
section.blog-single ul,
section.blog-body ul,
section.project-body ol,
section.blog-single ol,
section.blog-body ol {
  margin:0px 20px 20px 30px;
}

section.project-body ul li,
section.blog-single ul li,
section.blog-body ul li {
  line-height:1.2rem;
  margin:0 0 12px 0;
  list-style: none;
}

section.project-body ul li::before,
section.blog-body ul li::before,
section.blog-single ul li::before {
  content: "\2022";
  color: #ccc;
  width: 1rem;
  font-weight:700;
  display:inline-block;
  margin-left: -1rem;
}


#projects-projects {
  display:grid;
  grid-template-columns: 1fr;
}

#projects-projects h2 {
  margin-top:10px;
  margin-left: 8px;
  margin-right: 8px;
  margin-left: 12px;
  margin-right: 12px;
}

.fb-post {
  background-color:#fff;
  }
  
/* projects page -- a bit wonky */

.projectbox {
  display:grid;
  grid-template-columns:minmax(200px, 300px) 1fr;
  grid-template-columns:1fr; 
  margin-bottom:60px;
  padding:12px;
  border:1px solid rgb(255,255,255,0);
  color:#daeafb;
}

.projectbox:hover {
  border: var(--border-line);
  background-color:#3c3c3c;
  background-color:#333;
  color:#f0e6ac;
}

a.projectbox {
  text-decoration:none;
}

section.project-body .projectbox p.desc  {
  margin-top:4px;
  margin-bottom:0;
  line-height:1.2rem;
  color:#aaa;
}

section.project-body .projectbox img {
    margin:0;
    width:100%;
    height:auto;
}

.projectbox h3 {
  font-size:1.1rem;
  line-height:1.1rem;
  margin-bottom:8px;
  margin-top:10px;
  /* ibm-plex-sans */
  font-weight:600;
  text-decoration:underline;
}

iframe {
  width:100%;
}

/* blog */
#nav-above { display:none; }
.blog-single #nav-above { display:block; }
.project-bigvideo #nav-above { display:block; }

#nav-above a, #nav-below a, #nav-above, #nav-below { 
  font-size:0.9rem;
  color:#98fb98; 
  line-height:1.2rem;
}

.nav-previous {
  float:left;
  width:40%;
  text-align:left;
}

.nav-next {
  float:right;
  width:40%;
  text-align:right;
}

.post h2, .post h1 {
  padding-bottom:4px;
}

/*
.blog-single .page h2 {
  padding-bottom:4px;
  margin-top:4px;
}
*/

/*
h2.archive-title a, h2.entry-title a, h2 { 
  */
h2.archive-title a, h2.entry-title a { 
  text-decoration:none; 
  margin:0;
  line-height:1.8rem;
  display:block;
  font-size:1.4rem;
  font-family:ibm-plex-sans, sans-serif;
  font-weight:500;
}

section.blog-body .post {
  margin-top:1px;
}

section.tag-body div.main .page h3 {
  margin:0;
  margin-bottom:10px;
}

section.search-body div.main div.search-results h2.search-results-header {
  margin-bottom:40px;
}

section.blog-body.blog-single .post {
/*
  margin-top:11px;
  */
}


.entry-content {
  margin-bottom:20px;
}

.entry-meta {
  font-size:0.8rem;
  line-height:1.0/nav-rem;
  padding-bottom:8px;
  border-bottom: var(--border-line);
  min-width:50px;
  margin-bottom:100px;
  margin-top:14px;
  margin-top:10px;
  display:inline-block;
  color: var(--mid-dark);
}


blockquote {
  border:1px dotted #888;
  margin:10px 30px 20px 10px;
  font-style:normal;
  padding:20px;
  background-color:#4a4a4a;
}

blockquote p,
section.project-body blockquote p {
  margin:0;
  padding:0;
}

.listen {
  display:block;
  margin-bottom:50px;
  padding-left:20px;
}


.listen a {
  float:left;
  padding: 0 0 10px 10px;
}

/* scaremail generator */

#generator {
  width:100%;
}

#generatedtext {
  height:550px;
  border: var(--border-line);
  padding:20px;
}

#generator input {
  background-color:#ddd;
  color: #333;
  font-size:1rem;
  padding:10px 10px;
}

#generatorcontrols { 
  width:300px; margin-bottom:10px; 
}

#wordcount input { width:80px;margin:20px 0;}
#wordcount label { padding:6px 5px 0 0; font-size:14px;}

#generator #generatedtext {
  background-color:#ddd;
  color: #333;
  font-size:1rem;
  overflow:scroll;
  margin-bottom:10px;
}

#generatedtext p {
  color: #333;

}
/*
#generator { border:1px solid red; width:100%; }
#generatorcontrols { float:left; width:300px; margin-bottom:10px; }
#generatorcontrols button { margin:10px 0 0 0; float:left; }
#wordcount { width:100%; float:left; margin:10px 0;}
#wordcount label, #wordcount input { float:left; }
#wordcount label { padding:6px 5px 0 0; font-size:14px;}
#generatedtext { color:black;border:1px solid #ddd;background-color:white; font-family:Arial,sans-serif; float:left;}
#generatedtext p { line-height:normal;font-size:13px; }
#numwords { width:40px;float:left; }
.numwarning { display:none;color:red; margin:7px 0 0 10px; float:left;font-size:14px;}
#textnotes { float:left;padding:15px 0;display:none;font-size:14px; }
.textnote { color:#ccc;  }
*/

/* end scaremail generator */


footer {
  margin-bottom:20px;
  }


footer p {
  margin: 0 auto;
  color: #888;
  width: 60%;
  text-align: center;
  font-size: 0.8rem;
}

footer p .paren {
    display:inline;
}


.clear { clear:both; }

.hero-meta #home-imagecaption a {
  text-decoration:none;
  font-family:ibm-plex-sans, sans-serif;
  font-weight:400;
}

/* disabling dumb wordpress p tags everywhere */
p:empty {
  display:none;
}

/*
p:has(> a.target) {
display:none;
}
*/

section.project-body img.soundicon {
  display:inline-block;
  margin-top:4px;
}

.blog-home h2.mobile-only {
  display:none;
}

.bare-iframe {
  margin-bottom:14px;
}

/*
h2.archive-title a , h2.entry-title a { 
  margin:0;
  padding:0;
  letter-spacing: 0.1rem;
  font-size:1rem;
  font-weight:400;
  border:1px solid orange;
  line-height:1rem;
}
*/
/* mobile layout */
/*
@media all and (max-width: 740px) {
  html { font-size:18px; }
}
*/

section.project-body .blog-archives ul li,
section.blog-body .blog-archives ul li,
section.blog-single.blog-archives ul li {
  margin-bottom:20px;
}

/*
@supports(padding:max(0px)) {
    body, header, footer {
        padding-left: min(0vmin, env(safe-area-inset-left));
        padding-right: min(0vmin, env(safe-area-inset-right));
    }
}
*/

@media all and (max-width: 650px) {

  html { font-size:18px; }

  nav {
  }

  nav ul li.menu-item {
    width: 100%;
    margin-left:0;
    margin-bottom:4px;
    margin-top:10px;
    display: none;
    font-size:1.1rem;
  }

  nav ul li.menu-item.show {
    display: block;
  }

  nav ul li.btn {
    display: block;
  }

  nav ul li.menu-item:hover {
    border-radius: 2px;
    box-shadow: inset 0 0 2px #fff, inset 0 0 1px #ccc;
  }

  nav ul li.menu-item:hover:after {
    opacity: 0;
    pointer-events: none;
  }

  article.homeprojects {
    display: block;
  }

  div.hero-meta {
    grid-template-columns: 1fr;
    margin-top:2px;
    text-align: right;
  }

  .hero-meta a.seemore {
    display:none;
  }

  .hero-meta #home-imagecaption a {
    color:#afafaf;
    /*
    font-size:0.8rem;
    */
    padding:0 20px 0 20px;
    padding:0;
  }

  section,
  footer {
    padding: 20px 0px;
  }

  .page-template-about section.project-bigimage {
    padding-bottom:4px;
  }

  section.project-bigimage {
    padding-bottom:4px;
  }

  section.hero-home {
      padding-bottom:0px;
      padding:20px 20px 0;
  }

  section.home h2 {
      margin-left:20px;
      margin-right:20px;
  }

  /*
  section h2,
  */
  section h3,
  section p,
  section ul,
  section .wp-caption-text,
  section .wp-caption-text-right {
      padding-left:20px;
      padding-right:20px;
  }

  section.blog-body .wp-caption-text,
  section.blog-body .wp-caption-text-right {
      margin-top:2px;
  }

  section.project-body p {
    margin-bottom:28px;
  }

  section.project-body div.sidebar-about h3 {
    padding:0;
    max-width: 170px;
  }

  section.home {
    grid-template-columns: 1fr;
    grid-gap: 20px;
  }

  article.homeprojects {
      padding-left:20px;
      padding-right:20px;
  }

  article.homeprojects h2 {
      margin-left:0px;
      margin-right:0px;
  }

  article.homeprojects h2 {
  }

  section.home article p {
    font-size: 1rem;
    line-height: 1.3rem;
  }

  #projects-projects h2 {
      margin-left:20px;
      margin-right:20px;
  }

  .blog-home h2.mobile-only {
      margin-left:20px;
      margin-right:20px;
      margin-top:10px;
      margin-bottom:60px;
      display: block;
  }

  .projectbox {
      margin-left:0px;
      margin-right:0px;
      padding:20px 20px;
      margin-bottom:40px;
  }

  .projectbox p,
  .projectbox h3 {
      margin-left:0;
      margin-right:0;
      padding-left:0;
      padding-right:0;
  }

  .projectbox h3 {
    margin-top:9px;
  }

  section.project-body .projectbox p.desc {
    line-height:1.1rem;
    margin-top:10px;
  }

  section.project-bigvideo,
  section.project-bigimage {
    margin-top:0px;
  }

  section.project-bigvideo {
    margin-bottom:0;
  }



  form {
      margin:0 20px;
  }

  .entry-meta {
    margin-left:20px;
    margin-right:20px;
    line-height:1rem;
  }

  blockquote {
    margin:10px 40px 20px 40px;
  }

  #nav-above, #nav-below {
    margin-left:20px;
    margin-right:20px;
  }

  #nav-above a, #nav-below a {
  font-size:1rem;
  }

  footer p {
    font-size:0.9rem;
    width: 90%;
  }

  footer p .paren {
      display:none;
  }

  section.home article p {
    font-size: 1rem;
    line-height: 1.3rem;
  }

section.project-body h2, 
section.blog-body h2, 
section.blog-single h1, 
section.project-bigvideo h2,
section.project-bigimage h2 {
    margin:20px 20px 10px;
}

  section div.bigvideo,
  section div.bigimage {
    margin-bottom:0px;
  }

  section.project-bigvideo div.main,
  section.project-bigimage div.main {
    padding-top:0;
  }

  section.project-body {
      grid-template-columns: 1fr;
      grid-gap:0;
  }

  section.project-body div.main {
      margin-top:0;
  }

  section.project-bigimage img,
  section.project-bigvideo img,
  section.project-body img {
    /*
    margin:10px 0 8px;
    */
    /*
    max-width: 99.03225806%; 
    */
    width:100%;
    height: auto;
  }

  section.project-body .wp-caption,
  section.project-bigvideo .wp-caption,
  section.project-bigimage .wp-caption {
      width: 100% !important;
      line-height: 1rem;
  }

  section.project-body div.sidebar {
    order:2;
    display:none;
  }

  section.project-body div.sidebar-about {
    order:2;
    display:block;
    font-size:1.1rem;
    margin-bottom:0px;
    margin-top:30px;
    text-align:center;
  }

  section.project-body div.sidebar-about h3 {
    text-align:center;
    font-size:1.0rem;
    margin:0 auto;
    margin-bottom:10px;
    max-width:140px;
  }

  section.project-body div.sidebar-about p {
    font-size:1.0rem;
    line-height:2.0rem;
  }

  section.project-body div.sidebar h3.project-menu {
    /*
    margin-top: 40px;
    */
  }

  section.project-body div.sidebox {
    margin-bottom:60px;
  }

section.project-bigimage .wp-caption-text-right {
  font-size:0.9rem;
  text-align:right;
  color:#aaa;
  margin-bottom:10px;
  /*
  margin-top:6px;
  */
  width: 100% !important;
  padding-left:20px;
  padding-right:20px;
}

section.project-bigimage .wp-caption-text-right .dl-link {
  display:none;
}

  article h2 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    line-height: 1.8rem;
  }

  section.project-body button {
    margin-bottom:20px;
    width:100%;
  }

  #generator {
    padding:0 20px;
  }

section.project-body img.soundicon {
  margin-top:4px;
}

  footer p {
    font-size:0.9rem;
    width: 90%;
  }

  footer p .paren {
      display:none;
  }

/*
  .mobile-only {
    display: block;
  } 
  */

  .bare-iframe {
    margin-bottom:20px;
    margin-top:20px;
  }
/*
  iframe {
  padding-left:0;
  padding-right:0;
  }
  */
}