/*
*  CUSTOM POSTS TYPE: 
*  Stylesheet
* --------------------------------------------- */

/* Glossary List: shortcode */
.glossary-alphabetical {
	margin: 0 auto;
}

.alphabet-nav {
  display:none;
}

.alphabet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(63px, 63px));
    gap: 1px;
    margin: 0 auto;
	padding: 5%;
	box-sizing:border-box;
}

.alphabet-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 63px;
    height: 63px;
    text-decoration: none;
    font-weight: 600;
    color: var(--wp--preset--color--accent-blue);
    margin: 0px;
    transition: all 0.3s ease;
    outline: 1px solid var(--wp--preset--color--accent-blue);

}

.alphabet-link.has-posts:hover {
	background-color: var(--wp--preset--color--secondary);
	color: white;
}

.alphabet-link.no-posts {
	color: #777;
	cursor: default;
}

.glossary-terms {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14vw,14vw));
	justify-content:center;
	max-width:75vw;
	margin:0 auto;
	column-gap:2rem;
}

.glossary-terms-header {
	grid-column:span 3;
}

.letter-section {
	position: relative;
	margin-top:3rem;
}

.letter-heading {
	font-size: var(--wp--preset--font-size--large);
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 400;
	padding-bottom: 1rem;
	margin-top:0;
	margin-bottom: 1rem;
/* 	color: var(--wp--preset--color--accent-blue); */
	color: inherit;
 	text-transform:uppercase;
  	border-bottom:2px solid var(--wp--preset--color--accent-blue-four); 
/* 	border-bottom:1px solid var(--wp--preset--color--base);  */

}

.terms-list {
	padding:0 1.25rem;
	list-style:none;
}

.glossary-term a {
	text-decoration: none;
}

.glossary-term a:hover {
	color: var(--wp--preset--color--secondary);
}

.term-categories {
	margin-bottom: 1rem;
}

@media only screen and (max-width:48rem){
	.alphabet-nav {
       display:block;
       margin-bottom: 2rem;
    }
	
	.glossary-terms {
	   grid-template-columns: repeat(auto-fit, minmax(100%,100%));
    }
}


/* Glossary Alpabetical Post Navigation: shortcode */
.glossary-navigation {
	display:flex;
	align-content:center;
	align-items:center;
	height:40px;
}

.glossary-navigation span {
	min-width:40px;
	height:40px;
	box-sizing:border-box;
	text-align:center;
	border:1px solid black;
}

.glossary-navigation span:hover {
	background-color:white
}

.glossary-navigation a {
	font-size: 1.4rem;
	font-weight:300;
	line-height:1.6;
	text-decoration:none;
}

.glossary-navigation a:hover {
	font-weight:400;
}


/* Glossary Breadcrumbs: shortcode */
.glossary-breadcrumbs {
	margin-top:1rem !important;
	padding: 0.75rem 0;
	font-size: 0.85rem;
}

.glossary-breadcrumbs h3 {
	margin: 0;
	position: relative;
	bottom:-35px;
	font-size: var(--wp--preset--font-size--xxx-large);
	text-align:right;
	font-weight: 800;
	z-index:-1;
	display:none;
}

@media only screen and (min-width:48rem){
	.glossary-breadcrumbs {
		display: flex;
		justify-content: start;
	}
	
	.glossary-breadcrumbs h3 {
		right: 40px;
		bottom:-10px !important;
		line-height: 0;
    }
}


.breadcrumb-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.breadcrumb-item {
	display: flex;
	align-items: center;
}

.breadcrumb-item a {
	font-weight:500;
	text-decoration: none;
	transition: color 0.2s ease;
}

.breadcrumb-item a:hover {
	color: var(--wp--preset--color--secondary);
	text-decoration: underline;
}

.breadcrumb-item .current {
	font-weight: 200;
}

.separator {
	margin: 0 0.5rem;
}

/* Lexique page : Featured Image
 * ----------------------------------- */
.single-glossary .wp-block-post-featured-image {
	transform: rotate(-2deg);
}


/* Lexique page : Print preview 
 * ----------------------------------- */
@media print {
  body * {
    visibility: hidden;
  }

  .print-area,
  .print-area * {
    visibility: visible;
  }
	
  .print-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
	
  .print-area::before {
	content:'Les cahiers du textile';
	font-weight:bold;
	text-align:left;
	margin-bottom:70px;
  }
}


/* Shortcode: display secondary featured image
 * --------------------------------------------------  */
.secondary-featured-image {
	display:block;
	text-align:center;
	margin:0 auto;
}

.secondary-featured-image img {
	width:260px;
	object-fit:cover;
}


/* MAGAZINE NAVIGATION: read next article
 * ----------------------------------------------  */
.magazine-posts-navigation {
	display:flex;
	justify-content:center;
	align-content:stretch;
	flex-direction:column;
	width:100%;
	max-width: 100%;
	padding:10px;
}

.magazine-thumbnail {
    flex-grow: 0; 
    position: relative;
    display: flex;
	justify-content:center;
    align-items: center;
}

.magazine-number {
	display: block;
	position:absolute;
	width:46%;
	font-weight:200;
	font-style:italic;
	margin:0 0 0 15px;
}

.parent-featured-image {
	position:relative;
	z-index:1;
}

.parent-featured-image img {
	width: auto;
    height: 240px;
    object-fit: cover;
    object-position: center center;
}

.magazine-navigation-content {
	flex-grow: 1;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	height:100%;
}

.magazine-navigation-content .nav-container {
	display:flex;
	justify-content:center;
	align-items: center;	
	gap: 1.5rem;
}

.magazine-navigation-content .nav-container p {
	display:none;
}

.magazine-navigation-content .nav-link-text {
   display:flex;
   flex-wrap:nowrap;
}

.magazine-navigation-content .nav-link-arrow {
	font-size:2rem;
	width:30px;
}

.magazine-navigation-content .nav-previous {
	justify-self: start;
	text-align:left;
}

.magazine-navigation-content .nav-next {
	justify-self: end;
	text-align:right;
}

.magazine-navigation-content .nav-indicator {
	flex-basis:60px;
	text-align: center;
	font-size:0.8rem;
	padding: 0 .5rem;
}

.magazine-navigation-content .nav-link {
	display: block;
	padding: 0.75rem 0 0 0;
	text-decoration:none;
	transition: all 0.3s ease;
	max-width: 350px;
}

.magazine-navigation-content .nav-link:hover {
	color:white;
}

.magazine-navigation-content .nav-label {
	display: block;
	font-size: 0.8rem;
	margin-bottom: 0.25rem;
}

.magazine-navigation-content .nav-title {
	display: block;
	font-size: 1rem;
	font-weight:500;
	line-height: 1.3;
}

/* Responsive Design */
@media only screen and (max-width:48em) {
    .magazine-navigation-content .nav-container {
		flex-direction:column;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;
        align-items: center;
		gap: 1rem;
		text-align: center;		
	}
	
	.magazine-navigation-content .magazine-nav-wrapper {
		display:flex;
	    flex-wrap: wrap;
        justify-content: space-between;
        align-content: center;
        align-items: center;
    }
	
	.magazine-navigation-content .nav-indicator {
	flex-basis:unset;
	}

    .magazine-navigation-content .nav-previous,
    .magazine-navigation-content .nav-next {
		justify-self: center;
	}

    .magazine-navigation-content .nav-link {
		max-width: 100%;
		padding:0;
	}

	.parent-featured-image img {
		height: 170px;
		
	}
}


/* MAGAZINE MENU: a list of posts from a parent post
 * -------------------------------------------------------------- */
@media (max-width: 768px) {
	.magazine-menu {
		display:none;
	}
}

.ct-magazine-menu.is-content-justification-right .magazine-menu .parent-post-title {
	flex-direction:row-reverse;
	justify-content:end;
}

.magazine-menu .parent-post-title {
	display:flex;
	justify-content:start;
	align-items:center;
}

.magazine-menu .parent-post-title h3 {
	font-size: 1rem;
	letter-spacing:normal;
	margin:0 10px 0 10px;
}

.magazine-menu ul {
	list-style:none;
	padding:0 35px;
}

.magazine-menu ul li a {
	font-size: var(--wp--preset--font-size--small);
	text-decoration:none;
}

.magazine-menu ul li.current {
	font-weight:600;
	margin-left:8px;
}

.magazine-menu ul li.current:before {
	content:"• "
}




/* TABLE OF CONTENTS
 * ------------------------------------  */
.table-of-contents-list {
	list-style:none;
}

.table-list-item {
	display:flex;
	padding-bottom:40px;
	margin-bottom:40px;
	border-bottom:1px solid black;
}

.table-of-contents-list-item:last-child .table-list-item {
	border-bottom:0;
}

.table-list-item-number {
	display:block;
	font-size:3rem;
	font-weight:100;
	font-family:var(--wp--preset--font-family--ysabeau);
	font-style:italic;
	flex-shrink:0;
	margin-right:20px;
	line-height:.9;
}

.table-list-item-content-wrapper {
	width:100%;
}

.table-list-item-category {
	display:block;
	font-size: 0.75rem;
    letter-spacing:3px;
	margin-bottom:-5px
}

.table-of-contents-list-item a {
	font-family:var(--wp--preset--font-family--ysabeau);
	font-size: 2.5rem;
    font-weight: 200;
    font-style: italic;
    letter-spacing: -1px;
	text-decoration:none;
	margin-bottom:35px;
}

.table-of-contents-list-item a:hover {
	color:var(--wp--preset--color--contrast);
	opacity:.7;
}

.table-list-item-content {
	display:flex;
	justify-content:space-between;
}

.table-list-item-excerpt {
	flex-basis:65%;
    flex-grow:0;
	font-size: var(--wp--preset--font-size--small);
}

.table-list-item-featured-image {
	display:block;
    position:relative;
	flex-basis:30%;
	margin:0 auto;
}

.table-list-item-featured-image img {
    position:absolute;
	right:0;
    bottom:-25px;
	height:180px;
	z-index:2;
	transition: all 400ms;
}

.table-of-contents-list-item:hover .table-list-item-featured-image img {
   bottom:5px;
}



/* SHORTCODE: display LATEST CUSTOM POST TYPE
 * -------------------------------------------------  */
.latest-cpt-wrapper {
	margin: 0 auto;
	text-align:center
}

.latest-cpt-thumbnail img {
	width: 350px;
    height: 350px;
    object-fit: cover;
    object-position: center center;
}

.latest-cpt-second-thumbnail img {
	width: auto;
    height: 350px;
    object-fit: cover;
    object-position: center center;
}

.latest-cpt-title {
	font-family:var(--wp--preset--font-family--montserrat);
	font-weight:100;
	font-size:2rem;
	letter-spacing:-1px;
	margin-top:15px;
}

.latest-cpt-title a {
	text-decoration:none;
	transition: all 400ms
}

.latest-cpt-title a:hover {
	color:black;
	font-weight:300;
	letter-spacing:0;
}


/* SHORTCODE: display LATEST MAGAZINE
 * ------------------------------------  */
.latest-magazine-wrapper {
	display:block;
	width:fit-content;
	margin: 0 auto;
	padding: 1rem;
	text-align:center;
}

.latest-magazine-issue {
	margin:0;
}

.latest-magazine-issue-thumbnail img {
	width: 350px;
    height: 350px;
    object-fit: cover;
    object-position: center center;
	margin:0 auto;
}

.latest-magazine-issue-second-thumbnail img {
	width: auto;
    height: 350px;
    object-fit: cover;
    object-position: center center;
	margin:0 auto;
}

.latest-magazine-issue-title {
	font-family:var(--wp--preset--font-family--montserrat);
	font-weight:300;
	font-size:1.65rem;
	letter-spacing:-1px;
	margin-top:0;
	margin-bottom:0;
}

.latest-magazine-issue-title a {
	text-decoration:none;
	transition: all 400ms
}

.latest-magazine-issue-title a:hover {
	color:black;
	font-weight:500;
	letter-spacing:0;
}

.latest-magazine-number {
	font-size:1rem;
	font-style:italic;
	font-weight:300;
	margin-top:8px;
	margin-bottom:5px;
}

.latest-magazine-button {
	text-align:center;
	margin-top:20px;
}

.latest-magazine-button a {
	font-weight:400;
	padding: 0.5rem 0rem;
	text-decoration:none;
	transition: all 600ms;
/* 	background-color:var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base); */
}

.latest-magazine-button a:hover {
	font-weight:600;
	letter-spacing:18px;
	text-decoration:none;
}