/*
Theme Name: Breizh Passion V2
Theme URI: 
Author: MaB2002
Author URI: breizh-passion.com
Description: 
Version: 0.0
Text Domain: breizhpassion
*/
/* https://codepen.io/utilitybend/pen/bGvjLba */
/* jaune #ffd700 */

@media ( max-width:900px ) {
	section.category {
		width: 100%;
	}
	
	section.blog {
		max-width: 100% !important;
		grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important;
		gap: 24px;
	}
	
.information , 
section.blog article {
	width: 100% !important;
  position: relative;
  border-radius: 10px;
  box-shadow: none;
  background: #fff;
  transform-origin: center;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
  border:1px #ffd700 solid;
}
article, .information {
	width: 80% !important;
	margin: 5% !important;
	padding: 5% !important;
}	
 
}

* {
    margin: 0;
    padding: 0;
    font-family: Helvetica;
      box-sizing: border-box;
}

p {
	font-size: 1.1em;
	line-height: 1.6em;
	padding-bottom:1.6em ;
}

/* Footer */
footer {
	background: #000;
	display: flex;
	justify-content: space-around;
	padding: 1em;
	color: #fff;
}
footer a {
	color: #fff;
    text-decoration: none;
	
}
footer a:hover {
	color: #ffd700 ;
}
/* Footer */

/* Header */
header {
    display: flex;
    align-items: center;
	justify-content: center;
}

header nav li {
    list-style: none;
    display: inline-block;
    position: relative;
	z-index:2;
}

header nav li a {
    display: inline-block;
    text-decoration: none;
    color: #999;
    transition: all 0.3s ease 0s;
    line-height: 90px;
    padding: 0 1em;
    border-bottom: 2px #000 solid;
}

header nav li.current-menu-item a {
	font-weight: bold;
    color: #000000;
    border-color:  #ffd700 ;
}

header nav li a:hover {
    color: #ffd700;
    border-color:  #ffd700 ;
}

header nav li ul {
	display:none;
	position: absolute;
	top:90px;
	background: #FFF;
}
header nav li ul li a {
	line-height: 60px;
	width: 300px;
}
header nav li:hover ul {
	display:block;
}


header .custom-logo-link {
	max-width: 80px;
	margin-right: 2em;
}

header .custom-logo-link img{
	max-width: 100%;	
	height: auto;
}

/* Main */
#mapid {
	z-index:1;
}
main {
  margin: 0 auto;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;  
  
}

main h1,
main h2 {
	width: 100%;
	line-height:3em;
	font-size: 2em;
	text-transform: uppercase;
	color:#333;
}

main h2 {
	line-height:2em;
	font-size: 1.5em;
	padding-bottom: 0.5em;
}
main .taxonomy-description {
	font-size: 1.2em;
	width: 100%;
	padding: 0 0 2em 0;	
	color:#666;
}

main .post-navigation {
	float: left;
	margin:1em 0;
	width: 100%;
	
}
main .post-navigation .nav-links {
	display: flex;
	justify-content: space-between;
}
main .post-navigation  a{
    display: inline-block;
    text-decoration: none;
    color: #999;
    transition: all 0.3s ease 0s;
    line-height: 90px;
    padding: 0 1em;
    border-bottom: 2px #000 solid;
}
main .post-navigation  a:hover {
    color: #ffd700;
    border-color:  #ffd700 ;
}



section.article {
	width: 1200px;
	margin-inline: auto;	
}

article.half-page {
  display: flex;
  width: 100%;
}
article.half-page .content {
	padding-left:2em;
}

/**/
section.category {
	width: 1200px;
	margin-inline: auto;
}

/* blog */
section.blog {
  display: grid;
  max-width: 1200px;
  margin-inline: auto;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 24px;
}

.information , 
section.blog article {
  --img-scale: 1.001;
  --title-color: black;
  --link-icon-translate: -20px;
  --link-icon-opacity: 0;
  position: relative;
  border-radius: 10px;
  box-shadow: none;
  background: #fff;
  transform-origin: center;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
  border:1px #ffd700 solid;
}
.information {
	width: 30%;
	float:left;
	margin-right: 2%;
	margin-top:30px;
}

section.blog article a::after {
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  cursor: pointer;
  content: "";
}
.information h3, 
section.blog article h2 {
  margin: 0 0 18px 0;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  color: var(--title-color);
  transition: color 0.3s ease-out;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.information p, 
section.blog article p {
  margin: 0 0 18px 0;
  font-size: 1rem;
  height: 55px;
  overflow: hidden;
}
.information .infos , 
section.blog article .infos {
  font-size: 0.8rem;
  margin: 0 0 15px 0;
}
.information figure , 
section.blog figure {
  margin: 0;
  padding: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.information figure figcaption {
	position: absolute;
	top:70px;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	color:#ffd700;
	font-size: 1.5em;
	-webkit-text-stroke: 1px #ffd700;
	text-shadow: 0px 1px 4px #333;	
	
}
.information img, 
section.blog article img {
  max-width: 100%;
  transform-origin: center;
  transform: scale(var(--img-scale));
  transition: transform 0.4s ease-in-out;
}
.information .article-body, 
section.blog .article-body {
  padding: 24px;
}
section.blog article a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #ffd700;
}
section.blog article a:focus {
  outline: 1px dotted #ffd700;
}

.information a .icon , 
section.blog article a .icon {
  min-width: 24px;
  width: 24px;
  height: 24px;
  margin-left: 5px;
  transform: translateX(var(--link-icon-translate));
  opacity: var(--link-icon-opacity);
  transition: all 0.3s;
}
.information:has(:hover, :focus), 
section.blog article:has(:hover, :focus) {
  --img-scale: 1.1;
  --title-color: #ffd700;
  --link-icon-translate: 0;
  --link-icon-opacity: 1;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
.information nav {
	margin-top:20px ;
	background: #000;
	display: flex;
	justify-content: space-around;
	align-items: center;
	
}
.information nav a{
	padding:5px;
	width: 50%;
	text-align: center;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
}
.information nav a:hover{
	background: #ffd700;
}




.wp-block-gallery {
	margin:2em 0;
}
.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

/* MAP */
#mapid .marker-icon {
  display: flex;
  align-items: center;
  justify-content: center;
	
}

#mapid.full .marker-date,
#mapid.full .marker-text
{
	
	display: none;
}
#mapid.full .marker-icon:hover .marker-date, 
#mapid.full .marker-icon:hover .marker-text 
{
	display: block;
}

#mapid .marker-date {
	z-index:2;
	position: absolute;
	top: 0;
	left:18px;
	border: 2px #B41000 solid;
	color:#000;
	background: #fff;
	padding:2px 2px 2px 5px;
	text-align: center;
	font-weight: bold;
	display: inline;
	text-wrap: nowrap;
	font-size: 10px;
	text-transform: uppercase;
	font-weight:bold;
	display: none;
}
#mapid .marker-icon:hover .marker-date {
	display: block;
}
#mapid .marker-text {
	position: absolute;
	top: -28px;
	min-width: 61px;
	color:#000;
	background: #fff;
	padding:4px;
	border: 3px #B41000 solid;
	text-align: center;
	font-weight: bold;
	display: inline;
	border-radius: 3px;
	text-wrap: nowrap;
	font-size: 10px;
	text-transform: uppercase;
	font-weight:bold;
}
#mapid .current .marker-text,
#mapid .current .marker-date
{
	border-color:#1bb528;
}



#mapid .leaflet-popup {

}
#mapid .leaflet-popup .leaflet-popup-content-wrapper {
	border-radius: 0;
    margin: 0;
    padding: 0;
}
#mapid .leaflet-popup .leaflet-popup-content-wrapper .leaflet-popup-content {
	margin: 0;
	width:200px;
	position: relative;
	overflow: hidden;
}
#mapid .leaflet-popup a.leaflet-popup-close-button {
	margin: 5px;
	border-radius: 14px;
}
#mapid .leaflet-popup:hover a.leaflet-popup-close-button {
	background: #FFF;
}
#mapid .leaflet-popup .leaflet-popup-content-wrapper .leaflet-popup-content .content-body {
	padding: 15px;
	position: relative;
}
#mapid .leaflet-popup .leaflet-popup-content-wrapper .leaflet-popup-content .content-body .date{
	position: absolute;
	top:-12px;
	left: 0;
	width: 100%;
	font-size: 1.2em;
	line-height: 1.2em;
	color: #000;
	text-align: center;
	font-weight: bold;	
	background: #ffd700;
}
#mapid .leaflet-popup .leaflet-popup-content-wrapper .leaflet-popup-content .content-body .title{
	font-size: 1.1em;
	font-weight: bold;
	text-transform: uppercase;
	
}
#mapid .leaflet-popup .leaflet-popup-content-wrapper .leaflet-popup-content .content-body .link{
	position: relative;
	float: left;
	width: 100%;
	font-size: 1em;
	line-height: 1em;
	color: #000;
	text-align: left;
	padding:10px 0;
}
#mapid .leaflet-popup .leaflet-popup-content-wrapper .leaflet-popup-content .content-body .link a{
	font-weight: bold;	
	text-decoration: none;
	color: #000;
}



@media screen and (max-width: 960px) {
  article {
    container: card/inline-size;
  }
  .article-body p {
    display: none;
  }
}

@container card (min-width: 380px) {
  .article-wrapper {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 16px;
  }
  .article-body {
    padding-left: 0;
  }
  figure {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  figure img {
    height: 100%;
    aspect-ratio: 1;
    object-fit: cover;
  }
}