/* Main CSS for Munster Conservancy website.

  NOTE: the "jsOnly" rule is defined in templates/header.php

  Unless otherwise specified we use the industry standard breakpoints.
  The Google reCaptcha widget breaks down around 430px, so we need
  an extra custom breakpoint for that. Still some minor cosmetic problems
  remain with GreCaptcha on devices smaller than 400px wide. So be it.
    430px - GreCaptcha custom special
    480px - Smartphone
    768px - Small tablet
    992px - Small desktop / large tablet
   1200px - Large desktop

  
*/


/******************** Basic layout ********************/

@font-face {
  font-family: "Poppins Medium";
  src: url("../fonts/Poppins-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "Poppins Bold";
  src: url("../fonts/Poppins-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Poppins Medium Italic";
  src: url("../fonts/Poppins-MediumItalic.ttf") format("truetype");
}

body {
  background-color: #7e7e7e;
  font-family: "Poppins Medium", "Arial", "Helvetica", "sans-serif";
  letter-spacing: 0.1em;
  color: #003300;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.content, .footer {
  max-width: 61.5rem;	/* 1rem = 16px; 984px wide fits 1024px w/ scrollbar */
  padding-top: 1em;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1em;
  padding-right: 1em;
  background-color: #ffffffcc;
  border-left: 1px solid #003300;
  border-right: 1px solid #003300;
}

.content {
  margin-top: 1em;
  border-top: 1px solid #003300;
  min-height: 70vh;
}

.footer {
  padding-bottom: 2em;
  border-bottom: 1px solid #003300;
  font-size: 0.5em;
  text-align: center;
  line-height: 1.2em;
} 

.content p {
  margin-bottom: 0em;
  padding-bottom: 1em;
}

.content b {
  font-family: "Poppins Bold", "Arial Bold", "Helvetica Bold", "sans-serif";
  font-weight: bold;
}

.content i {
  font-family: "Poppins Medium Italic", "Arial", "Helvetica", "sans-serif";
  font-style: italic;
  font-weight: medium;
}

.footer hr {
  width: 80%;
  margin-top: 3em;
}


/******************** Basic elements ********************/

.printOnly {
  display: none;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1em;
  margin-bottom: 0.5em;
}

p {
  line-height: 1.5em;
}

h1, h2, h3 {
  text-shadow: 1px 2px 2px #00330066;		/* Hor Ver Blur Col */
}

h4 {
  font-style: italic;
  margin-bottom: 1.5em;
}

p.intro {			/* On home page */
  margin-left: auto;
  margin-right: auto;
  float: none;
  width: 80%;
}

a {
  color: #cc0000;
  text-decoration: none;
  font-weight: bold;
}

/* Add 'external' icon to links that take us off-site, but only on-screen. */
/* (Yes, the proper way to do this would be to do it on all media and then */
/* remove it again in the print stylesheet, but that's a big PITA, so no.) */
@media screen {

  a.external {
    position: relative;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
  }

  a.external::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    background-size: contain;
    background-repeat: no-repeat;
    transition: background-color 150ms ease-in-out;
    mask-size: cover;
    mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik03LjcwNSAzLjk5OGEuNzUuNzUgMCAwIDEgLjEwMSAxLjQ5M2wtLjEwMS4wMDdINS43M2EuOTY4Ljk2OCAwIDAgMC0uOTczLjgzNWwtLjAwNy4xMXYxMS44NjJjMCAuNDgxLjM3NS44ODQuODY1LjkzOWwuMTE1LjAwNmgxMi4xMDZhLjk2OC45NjggMCAwIDAgLjk3My0uODM1bC4wMDYtLjExVjE2LjRhLjc1Ljc1IDAgMCAxIDEuNDkzLS4xMDJsLjAwNy4xMDJ2MS45MDVjMCAxLjMtMS4wMjYgMi4zNTctMi4zMTcgMi40NGwtLjE2Mi4wMDVINS43M2MtMS4zMTIgMC0yLjM5LTEuMDA2LTIuNDc1LTIuMjg0bC0uMDA1LS4xNlY2LjQ0MmMwLTEuMyAxLjAyNi0yLjM1OCAyLjMxNy0yLjQ0bC4xNjMtLjAwNWgxLjk3NXpNMjAgMy4yNWEuNzUuNzUgMCAwIDEgLjc0My42NDhMMjAuNzUgNHY2LjAyNWEuNzUuNzUgMCAwIDEtMS40OTMuMTAxbC0uMDA3LS4xMDFWNS43ODRsLTcuNjkgNy41MzVhLjc1Ljc1IDAgMCAxLTEuMTIzLS45ODhsLjA3NC0uMDgzIDcuNjUxLTcuNDk4aC00LjMxYS43NS43NSAwIDAgMS0uNzQzLS42NDhMMTMuMTAyIDRhLjc1Ljc1IDAgMCAxIC42NDgtLjc0M2wuMTAyLS4wMDdIMjB6IiBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPgo=");
  }

}

a:hover, a.button:not(.disabled):hover {
  color: #ffff00;
  background-color: #409544;			/* Logo green */
}

a.button {
  color: #409544;				/* Logo green */
  background-color: #eeffee;
  font-weight: bold;
  padding: 0.25em;
  border: 1px solid #409544;			/* Logo green */
  border-radius: 0.5em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  margin-left: 0.5em;
}
  
a.button.disabled, input[type='button'].disabled {
  color: #999999;
  background-color: #cccccc;
  cursor: none;
}

a.button.toTop {	/* "Go to top" floating nav widget */
  display: none;	/* Initially hidden */
  opacity: 0.6;
  font-size: 200%;
  border: 2px solid #409544;			/* Logo green */
  position: fixed;
  bottom: 1em;
  right: 1em;
  z-index: 666;
  cursor: pointer;
}

ul, ol {
  list-style-position: outside;
  padding-left: 1em;
  margin-bottom: 1em;
}

ul li, ol li {
  margin-left: 1em;
}

ul.paragraphed li, ol.paragraphed li {
  margin-bottom: 1em;
}

.left {					/* Ad-hoc block element floating */
  float: left;
  margin-right: 1em;
  margin-bottom: 0.5em;
}

.right {				/* Ad-hoc block element floating */
  float: right;
  margin-left: 1em;
  margin-bottom: 0.5em;
}

.center {				/* Ad-hoc block element centering */
  margin-left: auto;
  margin-right: auto;
  float: none;
}

.bordered {				/* Adhoc block element border style */
  border: 2px solid #00000099;
}

.shadowed {				/* Same for shadowing */
  box-shadow: 0.5em 0.5em 1em rgba(0, 0, 0, 0.25);
}

/* On smaller screens this frippery gets in the way, so tone it down: */
@media (max-width: 768px) {

  .bordered {
    border: 1px solid #000000;
  }

  .shadowed {
    box-shadow: 0em 0em 0em rgba(0, 0, 0, 0);
  }

}

img.logo {				/* Only used on home page */
  width: 80%;
  max-width: 480px;
  margin-bottom: 1em;
}

img.lazy {
  display: none;			/* Initially hide spinner */
}

/* Notice to display when user tries to print before all lazy      */
/* images have been loaded / cached (which messes up printing);    */
/* initially hidden in case we have no Javascript support:         */
.lazyPrintSwitch.print {
  display: none;
}


/************ Table-less (i.e. flexible) tables ************/

.table {				/* <table> */
  display: table;
  border-collapse: collapse;
}

.table .tr {				/* <tr> */
  display: table-row;
}

.table .col {				/* <col> */
  display: table-column;
}

.table .th, .table .td {		/* <th>, <td> */
  display: table-cell;
}


/******************** Fluid & responsive layout ********************/

.fluid-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

.fluid-col {
  flex: 1;
}

.fluid-col.widegap {
  padding-left: 2em;
}

@media screen and (max-width: 1200px) {

  .content, .footer {
    width: 80%;
  }
}

@media screen and (max-width: 992px) {

  .content, .footer {
     width: 90%;
  }

  img:not(.lazy):not(.icon) {
    float: none;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: auto;
  }

  .fluid-row {
    flex-direction: row;
  }

  .fluid-col {
    flex: auto;
  }

  .fluid-col.widegap {
    padding-left: 0em;
  }

}

@media screen and (max-width: 768px) {

  .fluid-row {
    flex-direction: column;
  }

}

@media screen and (max-width: 480px) {

  .content {
    letter-spacing: 0em;
  }

}

@media screen and (max-width: 430px) {

  .content {
    font-size: 0.9em;
    line-height: 1em;
  }

  .fluid-row {
    flex-wrap: unset;
  }

}


/*************** Desktop navigation bar ***************/

.navbar {
  display: block;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 1em;
  background-color: #00000099;
  font-family: "Arial", "Helvetica", "sans-serif";
  text-align: left;
}

.navbar a {
  color: #aaaaaa;
}

.navbar a:hover {
  color: #409544;		/* Logo green */
  background-color: transparent;
}

.navbar a.active {
  color: #ffffff;
}

.navbar > ul > li:not(:first-child)::before {
  content: '|';
  margin-left: 0.5em;
  margin-right: 0.75em;
  color: #aaaaaa;
  display: inline-block;
  height: 1em;
  line-height: 1em;
}

.navbar ul {
  list-style: none;
  display: flex;
  padding: 1em;
  margin: 0px;
}

.navbar ul li {
  position: relative;
}

.submenu {
  list-style: none;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: calc(100%+2em);
  left: 1.25em;
  text-align: center;
  z-index: 100;
  background-color: #000000cc;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3em);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.submenu li:not(:last-child) {
  border-bottom: 1px solid #aaaaaa;
}

.submenu li a {
  display: block;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  color: #aaaaaa;
  text-decoration: none;
  white-space: nowrap;
}

.has-submenu > a::after {
  content: " \25BC";		/* Down-pointing triangle */
  font-size: 0.75em;
  margin-left: 0.25em;
}

/* Show submenu on hover */
.has-submenu:hover .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


/******************** Mobile menu ********************/

button#menu-toggle {
  display: none;		/* Initially hide hamburger button */
  text-align: left;
  cursor: pointer;
  font-size: 1.5em;
  color: #ffffff;
  background-color: #000000;
  outline: 0.15em solid #000000;
  border-radius: 0.25em;
  margin: 0.5em;
  padding: 0.1em; 
}

@media screen and (max-width: 992px) {	/* Swap menus on breakpoint */

  .navbar {
    display: none;		/* Hide desktop navbar */
    width: max-content;
    padding-right: 1em;
  }

  button#menu-toggle {
    display: block;		/* Show hamburger button */
  }

  .navbar {
    margin-left: 5%;
  }

  .navbar ul {
    flex-direction: column;	/* Stack menu items vertically */
    padding: 0em;
  }

  .navbar > ul > li::before {
    content: none !important;	/* Remove the '|' separators */
  }

  .submenu {
    position: static;
    transform: none;
    transition: none;
    visibility: visible;
    opacity: 1;
    background-color: transparent;
    text-align: left;
    font-size: 0.9em;
  }

  .has-submenu ul {
    padding: 0em;
  }

  .submenu li:not(:last-child) {	/* Remove horizontal separators */
    border: none;
  }

  .submenu li a {
    display: block;
    margin-top: 0em;
    margin-bottom: 0em;
    margin-left: 1em;
  }

  .has-submenu > a::after {
    content: '';			/* Remove downpointing triangle */
  }

  .has-submenu:hover .submenu {	/* Disable hover animation on mobile */
    opacity: 1;
    visibility: visible;
    transform: none;
  }

}


/*************************** Loading spinner **************************/

.loading-spinner, .waiting-spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3em;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/******************************** Forms *******************************/

.grecaptcha-badge {
  visibility: hidden;	/* Requires mentioning in footer for compliance */
}

.myForm {					/* Container */
  background-color: #f9f9f9;
  padding: 1em;
  border: 1px solid #409544;			/* Logo green */
  border-radius: 0.75em;
  box-shadow: 0.5em 0.5em 1em rgba(0, 0, 0, 0.25);
}

.myForm h1 {
  margin-bottom: 0.5em;
}

.myForm h2 {
  margin-bottom: 1em;
}

.myForm h2 img {		/* Whatsapp logo on contact page form */
  max-width: 60px;
  max-height: auto;
  float: right !important;
  margin-left: auto;
}

.myForm .formContainer {
  display: grid;
  grid-template-columns: auto auto auto;
}

.myForm .formRow {
  display: contents;
}

.myForm .reCaptchaV2 {
  grid-column: 1 / -1;	/* Span all grid columns */
  float: right;
  margin-left: auto;
  margin-right: 0px;
  margin-bottom: 1em;
  display: inline-block;
}

.myForm .formLabel {
  text-align: right;
  padding-right: 0.5em;
  white-space: pre-wrap;
  word-break: keep-all;
}

.myForm .formLabelSmall {
  font-size: 0.6em;
  display: block;
  margin-bottom: 1em;
}

.myForm .formError {
  background-color: transparent;	/* Error icon appears here */
  padding-top: 4px;
  padding-left: 1px;
  padding-right: 1px;
  width: fit-content;
}

.myForm .formErrorMsg {
  font-weight: bold;
  background-color: #ed1c2e;
  color: #fff200;
  padding-left: 1em;
  margin-bottom: 1em;
}

@media screen and (max-width: 768px) {

  .myForm .formContainer {
    grid-template-columns: auto auto;
  }

  .myForm .formLabel {
    grid-column: 1 / -1;
    text-align: left;
    padding-bottom: unset;
  }

}

@media screen and (max-width: 480px) {

  .myForm .formRow {
    display: flex;
    flex-direction: column;
  }

  .myForm .formLabel {
    order: 0;
    margin-bottom: 4px;
  }

  .myForm .formError {
    order: 1;
    display: inline-block;
    margin-right: 6px;
  }

  .myForm .formTemplate {
    order: 1;
    display: inline-block;
  }

  .myForm .formRow.reCaptchaRow {
    display: block;
  }

  .myForm .reCaptchaV2 {
    float: left;
  }

}

@media screen and (max-width: 430px) {

  .myForm .reCaptchaV2 {
    transform: scale(0.75);	/* Reduce widget size */
    transform-origin: 0 0;
  }

}

.myForm form ul {
  list-style-position: inside;
  margin-bottom: 1em;
}

.myForm .formTemplate {
  max-width: 100%;
  text-align: left;
}

.myForm .breakAfterElement, .myForm .breakAfterLabel {
  display: block;
  margin-bottom: 1em;
}

.myForm input, .myForm textarea, .myForm select {
  color: #003300;
  background-color: #eeffee;
  box-sizing: border-box;
  border: 1px solid #409544;			/* Logo green */
  border-radius: 0.3em;
  margin-top: 2px;
  margin-left: 0px;
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-bottom: 0.15em;
}

.myForm input:not([type="checkbox"]), .myForm textarea, .myForm select {
  width: 100%;
}

.myForm input[type='radio'] {
  width: 1em;
  margin-right: 0.25em;
}

.myForm input.number, .myForm input[type='number'] {
  width: 6em;
  text-align: right;
}

.myForm input:focus, textarea:focus, myForm select:focus {
  background-color: #ffffff;
}

.myForm input.error {
  background-color: #ffcccc;
}

.myForm textarea {
  min-height: 5em;
  padding-top: 0.25em;
}

.myForm input.image {
  width: auto;
  height: auto;
  background-color: transparent;
}

@media screen and (max-width: 480px) {

  .myForm .formContainer {
    display: flex;
    flex-direction: column;
  }

  .myForm .formRow {
    display: flex;
    flex-direction: column;
  }

  .myForm .formLabel {
    display: block;
  }

  .myForm .formError {
    display: inline-flex;
    flex-direction: row;
  }

  .myForm .fcLineTemplate {
    display: flex;
    flex-direction: column;
  }

  .myForm .fcLineTemplateFieldSpacer {
    display: none;
  }

  .myForm input {
    width: unset;
  }

  .myForm span.breakAfterLabel {
    display: none;
  }

}

.myForm input.formSubmit {
  width: 4em;
  height: 1.5em;
  font-size: 1.25em;
  font-weight: bold;
  text-align: center;
  border: 1px solid #409544;			/* Logo green */
  color: #409544;				/* Logo green */
  background-color: #eeffee;
  cursor: pointer;
  float: right;
}

.myForm input.formSubmit:hover {
  color: #eeffee;
  background-color: #409544;			/* Logo green */
}

.myForm input.disabled, input.formSubmit.disabled,
.myForm input.disabled:hover, input.formSubmit.disabled:hover {
  color: #999999;
  background-color: #cccccc;
  border: 1px solid #999999;
  cursor: none;
}

.myForm .alert, .required, .required {
  color: #ff0000;
  font-size: smaller;
  vertical-align: super;
  margin-left: 0.25em;
}

/* Mark form fields that contain errors (does not work on checkboxes): */
.myForm .fieldError {
  background-color: #ff9999;
}

/* A brutal hack to mark checkboxes with errors: */
.myForm .formtemplate .fieldError {
  background-color: #ff9999;
}

/* Multi-field line templates: */
.myForm .fcLineTemplate {
  display: inline-flex;
  width: 100%;
  justify-content: space-between;
}

.myForm .fcLineTemplateField {
  display: inline-flex;
  flex-direction: column;
}

.myForm .fcLineTemplateFieldLabel {
  font-size: 0.6em;
}

.myForm .fcLineTemplateFieldSpacer {
  width: 1em;
}

/* Donation form */

.myForm.donate .formLabel,
.myForm.donate .formTemplate {
  display: flex;
  align-items: center;
  width: 100%;
}

.myForm.donate label {
  float: left;
  text-align: left;
}


.myForm.donate .formTemplate {
  text-align: right;
}

.myForm.donate input {
  float: right;
}

.myForm.donate input.formSubmit {
  width: 6em;
}

@media screen and (max-width: 992px) {

  .myForm.donate {
    width: fit-content;
  }

}

@media screen and (max-width: 768px) {

  .myForm .formContainer {
    grid-template-columns: max-content max-content auto;
    display: content;
  }

}

@media screen and (max-width: 480) {

  .myForm.donate .formTemplate {
    text-align: left;
  }

}


/* "What word did you try first?" asked Piglet. "Hunny", said Pooh. :-) */
.myForm .formRow.hp {
  height: 0px;
  overflow: hidden;
  position: relative;
  background-color: #f9f9f9;
}

.myForm .formRow.hp * {
  font-size: 0px;
  line-height: 0px;
  color: white;
  background-color: #f9f9f9;
  height: 0px;
  border: 0px;
}


/************************* Contact Us page ***********************/

.table.contact {
  width: fit-content;
}

.table.contact .th {
  background-color: transparent;
  font-weight: bolder;
  font-size: 1.5em;
  text-align: left;
  padding: 0.25em;
}

.table.contact .td {
  color: #003300;
  background-color: #00000044;
  border-bottom: 1px solid #ffffff;
  text-align: left;
  padding: 0.5em;
}

.table.contact .td a {
  white-space: nowrap;
}

@media screen and (max-width: 430px) {

  /* The phone numbers table on the Contacts page is a major headache on */
  /* really small screens. Properly restyling it requires some fairly    */
  /* CSS wizardry. Instead let's just omit the 'names' column' here:     */
  .table.contact .tr > .th:nth-child(1),
  .table.contact .tr > .td:nth-child(1) {
    display: none;
  }

}


/*************************** Trees page **************************/

figure {
  background-color: transparent;
  margin-bottom: 0.5em;
}

figure img {
  margin-bottom: 0.25em;
  max-width: 100%;
  height: auto;
  
}

figure figcaption {
  font-size: 0.8em;
  padding-left: 0.25em;
  word-wrap: break-word;
}


/**************************** Photo gallery ***************************/

.gallery {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  float: none;			/* Position gallery container on page */
  text-align: center;		/* Position images within container   */
  padding-bottom: 1em;
}

.gallery.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  row-gap: 0.5rem;		/* 1rem = 16px */
  column-gap: 0.5rem;
}

.gallery img:not(.icon):not(.lazy) {
  display: inline-block;
  border: 1px solid #003300;
}

.gallery a:hover {
  background-color: transparent;
}


/********************************* Blog *******************************/

.blog {
  margin-top: 1em;
}

.blog .blogPostItem {
  margin-top: 0em;
  display: block;
  clear: both;
}

.blog .blogPostListItem {
  margin-bottom: 2em;
}

.blog .blogPostTitle {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 0.25em;
}

.blog .blogPostPubdate {
  font-size: 0.75em;
  font-weight: normal;
  margin-bottom: 1em;
}

.blog .blogPostContent img,
.blog .blogPostContent figcaption {
  margin-left: auto;
  margin-right: auto;
}

.blog .blogPostContent figcaption {
  text-align: center;
  margin-bottom: 1em;
}

.blog .blogPostContent h1,
.blog .blogPostContent h2,
.blog .blogPostContent h3,
.blog .blogPostContent h4 {
  margin-top: 1em;
}

@media screen and (min-width: 481px) {

  .blog img.blogPostThumbnail {
    max-width: 15em;
    float: right;
    margin-left: 1em;
    margin-bottom: 1em;
    border: 1px solid #000000;
  }

}

/* Blog posts may be badly formatted with content encased in header tags */
/* rather than in paragraph tags. Also, condense summaries to one line:  */ 
.blog .blogPostSummary p, 
.blog .blogPostSummary h1, .blog .blogPostSummary h2,
.blog .blogPostSummary h3, .blog .blogPostSummary h4,
.blog .blogPostSummary h5, .blog .blogPostSummary h6
 {
  display: inline;
  margin-right: 0.25em;
  font-size: 1.5 rem;
  font-weight: normal;
}

.blog a.blogPostLink {
  font-size: 0.75em;
}

p.blogLink {
  clear: both;
  text-align: center;
}


/* EOF */