/*
 Theme Name:   Network Time Security
 Theme URL:    https://www.networktimesecurity.org/
 Description:  Theme for Network Time Security ISOC Website
 Author:       Internet Society
 Author URI:   https://www.internetsociety.org/
 Template:     twentytwenty
 Version:      1.0.0
 Text Domain:  nts-theme
*/

/*  BASE and MOBILE STYLES for Network Time Security website.
    This theme is mobile first. Responsive styles are below this section. */

/* BODY, HEADERS, FONTS */
@import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&display=swap');

body {
  font-family: 'Hind', 'Helvetica Neue', 'Helvetica', sans-serif;
  background-color: #fbfbfb;
  color: black
  font-size: 14px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5 {
  font-weight: 400;
}
h1.entry-title,
h2.entry-title {
}
a {
  color: #6b1ecc;
}

/* HEADER and MENU */
#site-header {
  background-color: black;
  color: white;
}
#site-header .primary-menu > li > a,
#site-header .primary-menu > li > .icon {
  color: white;
}
.site-title {
  font-size: 2.8rem;
  font-weight: normal;
}
.site-title a {
  background-image: url("/wp-content/themes/networktimesecurity/nts-logo.png");
  background-repeat: no-repeat;
  padding-left: 80px;
  height: 52px;
  display: table-cell;
  vertical-align: middle;
}
.toggle-wrapper.search-toggle-wrapper {
  display: none;
}
/* Mobile Menu and Toggle */
#site-header button.mobile-nav-toggle .toggle-icon,
#site-header button.mobile-nav-toggle .toggle-text {
  color: white;
}
#site-header button.mobile-nav-toggle .toggle-text {
  display: none;
}
.menu-modal button.close-nav-toggle {
  background-color: black;
  padding-right: 2em;
}
.mobile-menu {
  background-color: #eff2ec;
}
.modal-menu ul li a {
  color: #6b1ecc;
}
.menu-modal nav.mobile-menu li {
  border-color: #ddd;
}
.menu-modal nav.mobile-menu li button.sub-menu-toggle {
  color: black;
}
.modal-menu > li > a,
.modal-menu > li > .ancestor-wrapper > a {
  font-size: 2.4rem;
  padding: 2.5rem 0 2.5rem 2rem;
}
.primary-menu ul a {
  color: #6b1ecc;
}
body:not(.overlay-header) #site-header .primary-menu ul {
  background-color: #eff2ec;
}
body:not(.overlay-header) #site-header .primary-menu ul::before {
  color: #eff2ec;
}
/* Featured Media */
.featured-media {
  position: absolute;
  top: 80px;
  z-index: -1;
  border-bottom: 6px solid black;
}
.featured-media-inner.section-inner {
  max-width: 100%;
  left: unset;
  overflow: hidden;
  max-height: 230px;
}
.featured-media-inner.section-inner img {
  width: 100%;
  position: relative;
}
body:not(.overlay-header) .primary-menu ul {
  background-color: #0c1c2c;
}

/* FRONT PAGE */
body.home.singular header.entry-header {
  padding: 0;
  margin: 0;
}
body.home.singular figure.featured-media + header.entry-header {
  margin-top: 0;
}
body.home .post-inner {
  padding-top: 2em;
}
body.home h1.entry-title {
  font-size: 1em; /* hidden by graphic */
  position: relative;
  z-index: -2;
}
body.home .top-callout {
  padding-top: 35vw;
}
body.home .entry-content .wp-block-columns h3 {
  margin: 0;
  font-size: 3.4rem;
}
body.home ul.display-posts-listing li {
  margin-bottom: 0.75em;
  list-style: circle;
}

/* GENERAL CONTENT */
.singular .entry-header {
  background-color: unset;
  padding: 4em 2em 2em;
}
.singular figure.featured-media + header.entry-header {
  margin-top: 210px;
}
.singular .post-inner figure.featured-media + header.entry-header {
  margin-top: 0;
}
h1.entry-title,
h2.entry-title {
  margin: 0;
  text-align: left;
  padding: 0;
  margin: 0;
}
.header-inner {
  padding: 1em;
}
.post-inner {
  padding: 0 4rem;
}
.section-inner.medium {
  max-width: unset;
  margin: auto;
}
main .header-footer-group {
  color: black;
}
b, strong {
  font-weight: 700;
}
.nts-box {
  padding: 0 1em;
}
.nts-box h2 {
  margin-top: 0 !important;
}
.nts-box li {
  list-style: none;
  margin: 1em 0 1.5em;
  line-height: 1.3em;
}
.widget_text p,
.widget_text ol,
.widget_text ul,
.widget_text dl,
.widget_text dt,
.widget-content .rssSummary,
.entry-content {
  font-family: 'Hind', 'Helvetica Neue', 'Helvetica', sans-serif;
  letter-spacing: normal;
}
.alignfull {
  margin-top: 2rem;
}
ul.spacious-list li {
  margin-bottom: 2rem;
}
hr.wp-block-separator {
  margin: 2em auto;
}

/* NEWS and NEWS LISTING (POSTS) */
article {
  margin-bottom: 3em;
}
#blog-header {
  margin: 4rem 2rem -1rem; 
}
h2.entry-title a {
  color: #6b1ecc;
}
h2.entry-title.heading-size-1 {
  font-size: 3rem;
  margin-bottom: 0;
  font-weight: normal;
}
.entry-categories,
.post-meta .post-author,
hr.post-separator {
  display: none;
}
.post-meta-single-top .post-meta {
  justify-content: left;
  font-size: 1.5em;
}
.post-meta-wrapper {
  margin-top: 0.25em;
  margin-bottom: 1em;
  margin-right: unset;
  margin-left: unset;
  max-width: unset;
  width: unset;
}
.post-meta .meta-icon {
  margin-right: 0.4em;
  width: 14px;
  margin-top: -4px;
}
.pagination-single hr {
  display: none;
}
/* Featured Media on Post pages */
.post-inner .featured-media {
  position: static;
  top: unset;
  border-bottom: none;
}
.singular .featured-media::before {
  position: unset;
}
.post-inner .featured-media-inner.section-inner {
  max-width: 100%;
  left: unset;
  overflow: visible;
  max-height: unset;
}
.post-inner .featured-media-inner.section-inner img {
  width: 100%;
  position: relative;
}
/* Featured Media in News Listing */
body.blog .featured-media {
  position: static;
  margin: 0 auto;
  border-bottom: none;
}
body.blog .featured-media-inner.section-inner.medium {
  max-height: unset;
}
body.blog .featured-media-inner.section-inner img {
  position: static;
}
.thumbnail-default {
  display: none; /* hide on mobile */
}
/* COLOR PALETTE XXX - to add; example: */
/*
.has-brown-background-color {
  background-color: #3a3335;
}
.has-brown-color {
  color: #3a3335;
}
*/

/* FOOTER */
.header-footer-group .section-inner {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  width: 100%;
}
.header-footer-group .footer-widgets-outer-wrapper {
  padding: 2em;
}
.header-footer-group .footer-widgets-outer-wrapper {
  border-bottom: none;
  border-color: #ddd;
}
.footer-nav-widgets-wrapper {
  background-color: unset;
}
.footer-widgets img.image {
  margin: auto;
}
.footer-widgets .textwidget {
  color: black;
}
#site-footer {
  padding: 2em;
  background-color: black;
  color: white;
}
#site-footer a {
  color: white;
}
.reduced-spacing.footer-top-visible .footer-nav-widgets-wrapper,
.reduced-spacing.footer-top-hidden #site-footer {
  border-top: none;
}
.powered-by-wordpress {
  display: none;
}

/******************************************************************/
/*  RESPONSIVE STYLES for Network Time Security website.
    This theme is mobile first. Base and mobile styles are above. */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}

/* Medium devices (tablets, 768px and up) - PRIMARY BREAK POINT */
@media (min-width: 768px) {
  body.home .post-inner {
    padding-top: 200px;
  }
  .featured-media-inner.section-inner img {
    width: 100%;
    position: relative;
    top: -6.5vw;
  }
  .post-inner .featured-media-inner.section-inner {
    float: right;
    margin: 0 0 1em 1em;
    max-width: 40%;
  }
  .post-inner .featured-media-inner.section-inner img {
    width: unset;
    position: static;
    top: unset;
    margin: 0;
    padding: 0;
  }
  body.blog h1.entry-title, 
  article .image-and-summary {
    padding-left: 4rem;
  }
  body.home .top-callout {
    padding-top: 3em;
  }
  #blog-header {
    margin: 6rem 0 -4rem;
  }
  /* Featured Media in News Listing */
  body.blog .image-and-summary {
    display: grid;
    grid-template-columns: 80px 1fr;
    max-width: 1200px;
    margin: auto;
  }
  body.blog .image-and-summary .post-inner {
    padding-left: 1em;
  }  
  .thumbnail-default {
    display: block;
  }
  .entry-content > :not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    max-width: unset;
    width: unset;
  }
  ul.columns-two {
    column-count: 2;
    column-gap: 3rem;
  }
  ul.columns-two li {
    page-break-inside: avoid;
    margin-bottom: 2rem;
  }
  /* FOOTER */
  .footer-widgets.column-two.grid-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    align-items: center;
  }
  .footer-widgets .widget {
    margin-top: 0;
  }
  .footer-widgets img.image {
    margin: 0;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  body.blog main#site-content .post-inner,
  body.blog main#site-content .section-inner {
    max-width: 1200px;
    margin: auto;
    width: unset;
  }
  .post-inner {
    max-width: 1200px;
    margin: auto;
  }
  .header-inner {
    padding: 1em 0;
  }
  body.blog h1.entry-title, 
  article .image-and-summary {
    padding-left: 0;
  }
}