/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

:root {
  --plant-content-width: min(1440px,85vw);
  --plant-link-blue: #1a7a9c;
  --plant-orange: #FFBEA4;
}

html, body {
	overflow-x: hidden;
  
}

/* styling for the single post template single-audio_word.php in the child theme root folder */
.iwl-audio-word-single {
  margin: 2rem 3rem;
}



/* single plant post template */


.lower {
  text-transform: lowercase;
}

.single-plant {
	margin: 0 auto !important;
}

.single-plant-hero {
	width: 120vw;
	max-width: 120vw;
	margin-left: calc(40% - 60vw);
	margin-right: calc(50% - 60vw);
  height: 200px;
  object-fit: cover;
  position: absolute;

}

.single-plant-container {
  display: flex;
  flex-flow: column nowrap;
  gap: 1vw;
	width: var(--plant-content-width);
	max-width: var(--plant-content-width);
	margin: 220px auto 0 auto;
  padding-bottom: 4rem;
	box-sizing: border-box;
}

.single-plant-container > * p {
  margin: 0;
  font-weight: var(--e-global-typography-text-font-weight);
}





.post-navigation {
  display: flex;
  flex-direction: column;
  gap: 1vw;
}

.post-navigation a {
  color: var(--plant-link-blue);
  text-decoration: none;
}

.post-navigation a:hover {
  text-decoration: underline;
}

.breadcrumbs {
  margin: 0 !important;
}

.mobile-breadcrumb {
  display: none;
}

.next-links {
  display: flex;
  justify-content: space-between;
}






/* .body-container {
  display: flex;
  flex-flow: row nowrap;
  gap: 2vw;
}

.left-col {
  width: 30vw;
}
.right-col {
  width: 50vw;
} */

/* .body-container {
  display: grid;
  grid-template-columns: 30vw 50vw;
  column-gap: 1.7vw;
  grid-template-areas:
    "featured header"
    "featured details"
    "gallery details"
    "gallery  details"
    "gallery  related"
    "gallery  related";
} */

/* .featured-media       { grid-area: featured; }
.plant-header          { grid-area: header; }
.plant-details          { grid-area: details; }
.plant-gallery-block   { grid-area: gallery; }
.related-accordions    { grid-area: related; } */

.body-container {
  display: grid;
  grid-template-columns: 30vw 50vw;
  column-gap: 1.7vw;
}

.body-left-col {
  display: flex;
  flex-direction: column;
  gap: 1vw; /* spacing between featured image and gallery thumbnails */
}

.body-right-col {
  display: flex;
  flex-direction: column;
  gap: 1vw; /* spacing between header, details, and related accordions */
}

/*  */
/* image (left) column */
/*  */

.single-plant .featured-media img {
  display: block;
  width: 100%;
  /* height: 100%; */
  aspect-ratio: 1/1;
  object-fit: cover;
}

.single-plant .line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

/* gallery heading for smaller viewports */
.single-plant .gallery-thumbs-heading {
  display: none;
}

.single-plant .gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 4%;
}

.single-plant .gallery-full {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2%;
  width: var(--plant-content-width);
}

.single-plant .gallery-tile {
  /* width: 50%;
  height: 50%; */
  /* padding-bottom: 3%; */
}

.single-plant .gallery-tile-full {
  /* width: 23.5%;
  height: 23.5%; */
  padding-bottom: 2%;
}

.single-plant .gallery-tile img,
.single-plant .gallery-tile-full img {
  display: block;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.single-plant .gallery-thumb {
	all: unset;
  background-color: unset !important;
	cursor: pointer;
	display: block;
}

.single-plant .gallery-thumb img {
	display: block;
	width: 100%;
	height: auto;
}

.single-plant .gallery-see-all {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--base);
	color: var(--contrast) !important;
	font-weight: 700;
	text-decoration: none;
	aspect-ratio: 1 / 1;
}

.single-plant .gallery-see-all:hover {
	background: var(--base-2);
}

.plant-full-gallery {
  grid-column: 1 / -1;
  margin-bottom: 2rem;
}


.image-modal {
	border: none;
	padding: 0;
	max-width: 90vw;
	max-height: 95vh;
	background: transparent;
}

.image-modal[open] {
  display: grid;
	grid-template-columns: max-content;
	justify-content: center;
}

.image-modal::backdrop {
	background: rgba(0, 0, 0, 0.85);
}

.image-modal img {
	display: block;
	max-width: 90vw;
	max-height: 80vh;
  object-fit: contain;
	width: auto;
	height: auto;
  margin: auto;
}

.image-modal-caption {
	color: #fff;
	text-align: center;
	margin-top: .8rem;
	font-size: 1rem;
  font-weight: 600;
  max-width: 60vw;
  width: 100%;
  box-sizing: border-box;
}

.single-plant .image-modal-close {
	all: unset;
	position: absolute;
	top: 0.15rem;
	right: 0.5rem;
	font-size: 3rem;
	line-height: 1;
	color: #fff;
  background-color: rgb(0,0,0,0%) !important;
	cursor: pointer;
	text-shadow: rgba(0, 0, 0, 1) 0 0 8px ; 
}










/*  */
/* info (right) column */


.halq {
  /* margin-bottom: .9vw; */
  margin: .9vw 0 0 0;
  /* margin: 1.4rem 0 0 0; */
  display: flex;
  flex-direction: column;
  /* background-color: var(--base); */
}

.halq h2{
  margin-bottom: 0;
}

.eng {
  /* font-weight: bold; */
  /* margin-top: .8vw; */
  margin-top: 1rem;
  
}

.eng .bold {
  font-weight: bold;
}

.latin {
  font-size: 1.4rem;
  font-style: italic;
  margin-top: 1.5rem;
  margin-bottom: 1.3rem;
}

/* .plant-badges {
  margin-top: 1.2vw;
  display: flex;
  gap: 1vw;
}

.plant-origin, .plant-niche-zone {
  padding: .4rem 0;
  background-color: var(--base);
  text-transform: uppercase;
  width: 50%;
  text-align: center;
} */

.plant-badges {
  /*margin-top: 1.2vw;*/
  display: flex;
  gap: 1vw;
}

.badge-group {
  flex: 1;
  /* border-radius: 4px; */
  overflow: hidden;
}

.badge-group-title {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: .1rem 0;
  text-align: center;
  font-weight: bold;
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  /* border-bottom: 1px solid rgba(0, 0, 0, 0.15); */
}

.badge-group-row {
  display: flex;
  gap: .3rem;
  padding-top: .3rem;
  /* background-color: rgba(0, 0, 0, 0.08);  */
}

.badge-pill {
  flex: 1;
  padding: .4rem 0;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
}

.plant-origin-group {
  flex: 0 1 50%;
}

.plant-origin-group .badge-pill.is-active {
  background-color: var(--plant-orange);
}

.plant-niche-zone-group .badge-pill.is-active {
  background-color: var(--base);
}

.badge-pill.is-inactive {
  background-color: #e0e0e0;
  color: #a8a8a8;
}


.ecology-section {
  padding-top: .6rem;
}

/* halq-trans section to be removed if the audio word plugin tooltip display is preferred */

/* .halq-trans h4,  */
.ecology-section h4, 
.uses-section h4,
.plant-gallery-block h4 {
  font-family: 'Lora', serif;
  color: var(--contrast);
  font-weight: bold;
  margin-top: 1rem;
}

/* .halq-trans {
  padding-top: .4rem;
} */

/* .halq-trans h4,  */
.ecology-section h4 {
  margin-bottom: .8rem;
}

.uses-section h4 {
  margin-bottom: 0;
}

.plant-caution {
  display: flex;
  background-color: var(--plant-orange);
  padding-left: 1rem;
  padding: .4rem 1.5rem .4rem 1rem;
  margin-top: 1rem;
}

.plant-caution svg {
  max-width: 1.5rem !important;
  min-width: 1.5rem !important;
  padding-bottom: .1rem;
  margin: auto .8rem auto .3rem;
}

.plant-caution p {
  margin: .4rem 0;
  padding-top: .2rem;
  line-height: 1.3rem;
}

.uses-section h5 {
  font-size: 1rem;
  margin: 0;
  padding-top: 1rem;
  font-style: italic;
}
.uses-section ul {
  padding: 0;
  margin: 0 0 0 1.7rem;
  font-weight: var(--e-global-typography-text-font-weight);
  /* list-style-position: inside; */
}




/* 

 Accordion styles

*/



.related-accordions {
	border: 1px solid rgb(0,0,0,20%);
  margin: 3rem 0 auto 0;
}

.accordion-item{
	border-bottom: 1px solid rgb(0,0,0,20%);
	/* background: #f7f6f5; */
}

.accordion-item:last-child {
	border-bottom: none;
}



.related-accordions .accordion-header,
.related-accordions .accordion-header:hover,
.related-accordions .accordion-header:focus,
.related-accordions .accordion-header:active {
	background-color: transparent;
	border-radius: 0;
	border: none;
	box-shadow: none;
	outline: none;
	color: inherit;
}

.accordion-item-child .accordion-header {
  padding-left: 2.5rem; /* was 1.25rem — nudge as desired */
}

.halq-accordion-trigger-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}

.halq-accordion .accordion-header,
.halq-accordion .accordion-header:hover,
.halq-accordion .accordion-header:focus,
.halq-accordion .accordion-header:active {
	background-color: inherit;
	border-radius: 0;
	border: none;
	box-shadow: none;
	outline: none;
	color: inherit;
}

.halq-accordion .view-all {
  font-weight: 300;
}

.accordion-header {
	box-sizing: border-box;
	width: 100%;          
	text-align: left; 
	cursor: pointer;
	padding: .8rem 1.25rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-weight: 700;
	font-size: 1.1rem;
}

.halq-accordion .accordion-header {
  padding: .35rem .7rem .49rem .7rem;
  width: auto;
  flex-shrink: 0;
  font-size: large;
}



.related-accordions .accordion-item.is-open .accordion-header {
  border-bottom: 1px solid rgb(0,0,0,20%);
}

.accordion-header::-webkit-details-marker {
	display: none;
}

.accordion-icon {
	width: 1rem;
	height: 1rem;
	display: inline-flex;
	flex-shrink: 0;
}

.accordion-icon svg {
	width: 1rem;
	height: 1rem;
	fill: #444;
}

.accordion-icon svg {
  margin-bottom: .1rem;
}

/* Default state: details closed -> show the "closed" icon, hide "open" icon */
.icon-open {
	display: none;
}

/* When <details> has the open attribute, flip which icon shows */
.accordion-item.is-open .icon-closed {
	display: none;
}

.accordion-item.is-open .icon-open {
	display: inline-flex;
}

.accordion-panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 1s ease;
  grid-template-columns: minmax(0, 1fr);
	min-width: 0;
}

.accordion-item.is-open .accordion-panel {
	grid-template-rows: 1fr;
}

.accordion-content {
	background: #fff;
	overflow: hidden;
  width: auto;
  min-height: 0;
}

.halq-accordion .accordion-content {
  background: none;
}

.accordion-content-inner {
	padding: 1.25rem;
	line-height: 1.9;
}

.halq-accordion .accordion-content-inner {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.accordion-content a {
	color: var(--plant-link-blue);
	text-decoration: none;
}

.accordion-content a:hover {
	text-decoration: underline;
}

.accordion-view-all {
  padding-top: 1rem;
  font-weight: 400 !important;
}



.review-discussion {
  padding: 2rem 0;
}

.review-comment-list {
    list-style: none;
    margin: 0 0 1.5em 0;
}

.review-comment-list li {
    margin-top: 1rem;
}

.review-comment-actions {
    display: flex;
    gap: 1rem;
    flex-flow: row nowrap;
}

.review-comment button,
.review-comment button:hover,
.review-comment-delete-form button,
.review-comment-delete-form button:hover{
    text-decoration: underline;
    background-color: unset;
    line-height: normal;
    padding: 0;
}

.review-comment button,
.review-comment a,
.review-comment-actions a,
.review-comment-delete-form button {
    color: var(--plant-link-blue);
}

.review-comment button:hover,
.review-comment a:hover,
.review-comment-actions a:hover,
.review-comment-delete-form button:hover {
    color: var(--e-global-color-primary);
}

.review_comment_content {
    margin-bottom: 1rem;
}

.review-discussion-submit {
    margin-top: 1rem;
    border-radius: 0 !important;
}



@media (prefers-reduced-motion: reduce) {
	.accordion-panel {
		transition: none;
	}
}








/* 

archive template styles

*/

.plant-archive-content {
  margin: 2rem 1vw 5vw 3.5rem !important;
}

.archive-page-title {
  margin-top: 2vw;
  margin-bottom: 2vw;
  font-weight: bold;
}

.post-list-letter {
  font-size: 1.7rem;
  margin-top: 3rem;
}
.post-list-item {
  line-height: 3rem;
  font-size: 1.3rem;
}

.post-list-item a {
  text-decoration: none;
  color: var(--plant-link-blue);
}

.post-list-item a:hover {
  text-decoration: underline;
}




@media (max-width: 1079px) {
  :root {
    --plant-content-width: 90vw;
  }
  /* .body-container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "featured"
      "details"
      "gallery"
      "related";
    margin-top: 1rem;
  } */

    .body-container {
    display: flex;
    flex-direction: column;
    gap: 2vw; /* adjust to match your previous mobile spacing */
  }

  .body-left-col,
  .body-right-col {
    display: contents;
  }

  .featured-media     { order: 2; }
  .plant-header        { order: 1; }
  .plant-details        { order: 3; }
  .plant-gallery-block { order: 4; }
  .related-accordions  { order: 5; }

  .halq .smaller {
    font-size:medium;
  }

  .latin {
    /* margin-bottom: .5rem; */
  }

  .single-plant .featured-media {
    margin-bottom: 0;
  }

  .single-plant .featured-media img {
    aspect-ratio: 3/2;
    max-width: 1440px !important;
  }

  .plant-badges {
    /* margin-top: 0; */
  }

  .single-plant .gallery-thumbs-heading {
    display: block;
  }

  .single-plant .gallery {
    margin-bottom: 0 !important;
  }

  .single-plant .gallery,
  .single-plant .gallery-full {
    grid-template-columns: repeat(3, 1fr);
  }

  .related-accordions {
    margin-top: .5rem;
  }
}


@media (max-width: 768px) {
  .next-links {
    flex-flow: row wrap;
    gap: 3rem;
    justify-content: center;
  }
  .breadcrumbs {
    display: none;
  }

  .mobile-breadcrumb {
    display: block;
    margin-top: 1rem;
    margin-bottom: .5rem;
  }

  .halq h2 {
    font-size: 2rem;
  }

  .eng {
    font-size: 1.5rem;
    margin-top: .7rem;
  }

  .latin {
    font-size: 1.2rem;
    margin-top: 1.2rem;
  }

  /* .plant-origin, .plant-niche-zone {
    font-size: .9rem;
  } */
  .badge-pill {
    font-size: .9rem;
  }
  .single-plant .gallery,
  .single-plant .gallery-full {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  :root {
    --plant-content-width: 95vw;
  }

  .halq h2 {
    font-size: 1.4rem;
  }

  .halq-accordion .accordion-header {
    font-size: .9rem;
  }

  .eng {
    font-size: 1.1rem;
  }

  .latin {
    font-size: 1rem;
  }

  /* .plant-badges {
    display: flex;
    flex-direction: column;
    gap: 3vw;
  }

  .plant-origin, .plant-niche-zone {
    width: 100%;
  } */
  .plant-badges {
    flex-direction: column;
    gap: 3vw;
  }

  .plant-origin-group .badge-group-row {
    flex-direction: column;
  }

  .plant-niche-zone-group .badge-group-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .single-plant .gallery-full {
    grid-template-columns: 1fr;
  }

  .related-accordions {
    margin-top: 2rem;
  }
}