/*
Theme Name: NCVP classic
Description: Mimimal classic theme
Include -scode menu CSS. 
Keep menu section in step with ncvp_menu_scode_css_01.css
*/

html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

*,
*:before,
*:after {
	/* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

/*************/
/* Debugging */
/*************/

/* Useful for highlighting debugging statements */
.ncvp-dbg {
  background-color: #f00;
  color: #fff;
  font-style: oblique;
  padding: 0.2em 0.5em;
  font-size: .9em;
  display: none;
}

/***********/
/* Iframes */
/***********/

/* This is imperfect, but at least it stops the iframe bursting out of the mobile screen */
iframe {
    max-width: 100%;
    height: auto;
	 aspect-ratio: 4 / 3;
}

/***************/
/* Page layout */
/***************/

body {
  margin: 0 auto; /* Centres on wide screen */
  padding: 0.3em; /* Minimum gap to edge of screen */
  max-width: 1000px; /* Good readability on wide screen */
  font-family: sans-serif;
  line-height: 1.1em;
}

@media (width < 782px) {
  body {
    margin: unset; /* No need to centre. Restores a little margin */
  }
}

/* Defaults are too big */
h1, p {
  margin-block: 0; 
}

/* This targets page content without hitting stuff in header */
.entry-content p {
	margin: 1em 0;
}

/* Title just below menu. Restore after margin-block fix */
h1.page-title,
h1.entry-title {
  font-size: 2em;
  padding: 0.5em 0em;
}

/* Post title in lists */
h1.entry-title a {
  color: #00b;
  font-size: .8em;
}
h1.entry-title a:hover {
  text-decoration: underline;
}

/* Post titles in Home page list */
a.wp-block-latest-posts__post-title:hover {
  text-decoration: underline;
}

span.screen-reader-text {
	display: none;
}

/* Posted on ... by ... */
.entry-meta {
  margin-bottom: 1em;
}

a {
  text-decoration: none;
  border-radiusxxxx: 5px;
  overflow-wrap: anywhere; /* Stop long urls messing up mobile display */
}

div.entry-content table td {
  border: #ccc solid 1px;
}

/********/
/* Misc */
/********/

/* Jelly bean links. Not menu items. */
.ncvp-jlb {
  margin: 0.7em 0.3em 0.8em 0;
  font-weight: bold;
  padding: 0.1em 0.3em;
  color: #00f;
  background-color: #8f8;
  border-radius: 5px;
}

/* Link hover */

.ncvp-menu a:hover,
.ncvp-jlb:hover,
a.ncvp-jlb:hover,
.ncvp-jlb a:hover,
#ncvp-breadcrumbs a:hover {
  color: #fff;
}

.ncvp-metaXXXX a:hover {
  color: #000;
}

/**********/
/* Banner */
/**********/

#ncvp-banner {
  margin: 0.3em;
  background-color: #f8f8f8;
  padding: 0 1rem;
  border-bottom: 1px solid #ddd;
  display: flex;
  gap: 15px;
  align-items: center; /* Vertically */
}

@media (width < 782px) {
  #ncvp-banner {
    flex-direction: column;
  }
}

/* This stops long headers overlapping on mobile */
#ncvp-banner h1 {
  line-height: 0.9em;
}

/* Needed on one site even though uploaded icon was 70x70 */
#ncvp-banner > a > img {
  width: 70px;
  height: 70px;
}

@media (width < 782px) {
  #ncvp-banner > a > img {
    display: none;
  }
}

/***************/
/* Breadcrumbs */
/***************/

/* Are these ever used in ncvp-class? */

#ncvp-breadcrumbs a {
  background-color: #8dd;
  font-size: 80%;
  padding: 0.1em 0.3em;
}
#ncvp-breadcrumbs {
  margin: 0.9em 0em;
}

/*********/
/* Posts */
/*********/

/* Navigation in lists of posts */

#content .nav-previous {
  float: left;
  width: 50%;
}
#content .nav-next {
  float: right;
  text-align: right;
  width: 50%;
}

/**********/
/* Tables */
/**********/

/* In pages and posts. Should these be here or in ncvp-live-misc? */

.entry-content table td {
  border: #fff solid 1px;
  padding: 0px 5px;
}

.entry-content table {
  border-collapse: collapse;
}

/***********/
/* Rubrics */
/***********/

/* Mainly used in pages. Should they be here or in ncvp-live-misc? Warning - change to kebab case may mean some pages stop working */

.ncvp-rubric {
  padding: 0em;
  font-style: italic;
  font-size: 80%;
  font-weight: bold;
}

/* Useful for showing WP page code. has() construction styles parent of element */

div.entry-content p:has(code) {
  background-color: #ccc;
  padding: 7px 10px;
  border-radius: 5px;
}

.ncvp-code {
  background-color: #ddd;
  font-family: mono;
  padding: 0.2em 0.4em;
}

.ncvp-presn {
  background-color: #f3f3f3 !important;
  border: 1px solid #ddd;
  margin: 10px 0;
  padding-top: 4px;
  text-align: center;
}

/*************/
/* Galleries */
/*************/

div.gallery-icon img {
  height: auto;
  width: 100%;
}

.gallery-item {
  display: inline-block;
  text-align: left;
  vertical-align: top;
  margin: 0 0 1.5em 0;
  padding: 0 1em 0 0;
  width: 50%;
}

.gallery-columns-2 .gallery-item {
  width: 50%;
}

.gallery-columns-3 .gallery-item {
  width: 33.33%;
}

.gallery-columns-4 .gallery-item {
  width: 25%;
}

.gallery-columns-5 .gallery-item {
  width: 20%;
}

.gallery-columns-2 .gallery-item {
  max-width: calc((100% - 16px * 1) / 2);
}

.gallery-columns-2 .gallery-item:nth-of-type(2n + 2) {
  margin-right: 0;
}

.gallery-columns-3 .gallery-item {
  max-width: calc((100% - 16px * 2) / 3);
}

.gallery-columns-3 .gallery-item:nth-of-type(3n + 3) {
  margin-right: 0;
}

.gallery-columns-4 .gallery-item {
  max-width: calc((100% - 16px * 3) / 4);
}

.gallery-columns-4 .gallery-item:nth-of-type(4n + 4) {
  margin-right: 0;
}

.gallery-item a,
.gallery-item a:hover,
.gallery-item a:focus,
.widget-area .gallery-item a,
.widget-area .gallery-item a:hover,
.widget-area .gallery-item a:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
  background: none;
  display: inline-block;
  max-width: 100%;
}

.gallery-item a img {
  display: block;
  -webkit-transition: -webkit-filter 0.2s ease-in;
  transition: -webkit-filter 0.2s ease-in;
  transition: filter 0.2s ease-in;
  transition:
    filter 0.2s ease-in,
    -webkit-filter 0.2s ease-in;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.gallery-item a:hover img,
.gallery-item a:focus img {
  -webkit-filter: opacity(60%);
  filter: opacity(60%);
}

/* Gallery thumbnail caption */
.ncvp-gall-cap,
figcaption {
  font-size: 80%;
  line-height: 1.1em;
  padding: 1% 2% 1% 2%;
  border: 1px solid #888;
  background-color: #afa;
  border-radius: 3px;
  overflow: hidden;
  max-width: 300px;
}

/* Specific page / post styling */

.entry-content table td {
  padding: 2px 5px;
}
.entry-content table {
  margin: 0 0 10px 0;
}

/* Corrected weird layout problem with block edited blog pages */

.wp-block-latest-posts.wp-block-latest-posts__list li {
  clear: none;
}

/**********/
/* Footer */
/**********/

/* These styles are duplicated in all my child themes, but I couldn't make putting them in ncvp-live-misc.css work */

/* Footer elements nicely laid out side-by-side */
.ncvp-footer-01 {
  display: flex;
  justify-content: space-between;
  background: #eef;
  align-items: center;
  padding-left: 0.6em;
  /* Subtle. Quite nice */
  background-color: #f8f8f8;
  paddingx: 1rem;
  border-bottom: 1px solid #ddd;
}

/* 
	Small screens
	Where did this come from? It works perfectly
	Footer elements one above the other and centred
*/
@media (width < 782px) {
  .ncvp-footer-01 {
    display: inline;
  }

  div.ncvp-footer-01 {
    padding: 0; /* Fixes blobs of ncvp-footer-01 background without explaining them */
  }

  .ncvp-footer-01 div {
    display: table;
    margin: 0 auto;
    text-align: center;
  }

  .ncvp-smenu {
    padding-top: 0.5em;
  }
}

/* svg sprite social icons */

.ncvp-smenu ul {
  list-style: none; /* No bullets */
  margin: 0.2rem 0;
  padding: 0;
}
.ncvp-smenu li {
  float: left; /* Horizontal rather than vertical list */
}
.ncvp-smenu svg {
  height: 1.5em; /* Size of icon */
  width: 3em; /* Horizontal spacing */
  fill: #88f;
}
.ncvp-smenu svg:hover {
  fill: #00f;
}

#ncvp-bottom-barXXX {
  clear: both;
  font-size: 80%;
  padding: 0.3em 0.7em;
  background-color: #fdd;
  border-radius: 5px;
}

/*********************/
/* -scode style menu */
/*********************/

/* Not as good as -cblk or 2017, but perfectly adequate */

.main-navigation {
  position: relative;
  font-size: 0.9rem;
}

.main-navigation .nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.main-navigation .nav-menu li {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* Allow sub-menu to drop to full width below */
}

.main-navigation .nav-menu li > a {
  flex: 1; /* Take up remaining space, push button to the right */
}

.main-navigation .nav-menu a {
  display: block;
  padding: 0.6em 0em 0.6em 1em;
  text-decoration: none;
  color: inherit;
}

.main-navigation .nav-menu a:hover {
  text-decoration: underline;
}

/* Dropdowns */
.main-navigation .nav-menu .sub-menu {
  display: none;
  position: absolute;
  top: 100%; /* Move down this amount. 50% obscures top level */
  left: 10%; /* Move sub-menu over to right */
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  min-width: 180px; /* Quite useful for sub-item mousing */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 999;
  flex-basis: 100%; /* Force sub-menu onto its own line below */
}

.main-navigation .nav-menu .menu-item-has-children.open > .sub-menu {
  display: block;
}

.main-navigation .nav-menu .sub-menu a {
  padding: 0.5em 1em;
  white-space: nowrap;
}

/* Just mobile */

@media (width < 782px) {
  /* Dropdown toggle button on nodes with children. Created in JS */
  .dropdown-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 0.3em;
    font-size: 1em;
    vertical-align: middle;
  }

  /* Hamburger button */
  .menu-toggle {
    display: block;
    background: none;
    border: none;
    padding: 0.4em 0.8em;
    margin: 0.2em auto; /* Centre hamburger horizontally */
    cursor: pointer;
    font-size: 1rem;
  }

  .main-navigation .nav-menu {
    display: none;
    flex-direction: column;
  }

  .main-navigation.toggled .nav-menu {
    display: flex;
  }

  .main-navigation .nav-menu .sub-menu {
    position: static;
    box-shadow: none;
    padding-left: 1em;
  }

  .main-navigation .nav-menu .menu-item-has-children.open > .sub-menu {
    display: block;
  }

  /* Hide the 'has a sub menu' character */
  li.menu-item-has-children a span {
    display: none;
  }
}

/* Just desktop */

@media (width >= 782px) {
  /* Indent sub-menu items. Works quite well. Default behaviour on mobile is fine */
  .main-navigation .nav-menu .sub-menu ul {
    margin-left: 60px;
    background: #ddd;
  }

  /* Hide hamburger */
  .menu-toggle {
    display: none;
  }

  /* Dropdown button is added in JS, but should only happen in mobile menu */
  .dropdown-toggle {
    display: none;
  }
}