/*
Theme Name: Thème Systemoun
Author: Louison Bednarowicz
Author URI: https://webdev.knowitbetter.fr
Description: Ce thème a été spécialement conçu pour le site de l'association Systemoun - Association de Systémie du Sud-Ouest
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: context-blog

*/


/*
SOMMAIRE

I] Variables globales
II] Polices et styles généraux
III] Styles pour les listes d'articles

*/





/* variables globales */

:root {
  --transition-duration: 0.3s;
  --systemoun-strong-color: #19744C;
  --systemoun-strong-color-hover: #135A3B;
  --systemoun-strong-color-active: #0d3f28;
}

* {
  /* font-family: var(--wp--preset--font-family--primary); */
  margin: 0;
  scroll-behavior: smooth;
  box-sizing: border-box;
}

body {
  font-family: var(--wp--preset--font-family--primary);
  font-size: 18px;
  overflow-x: hidden;
  background-color: #F2F2F2;
}

.mobile-only {
  display: none;
}

* {
  word-break: break-word;
  overflow-wrap: break-word;
}



/* polices */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--wp--preset--font-family--lexend);
  font-weight: 900;
  margin-top: 40px;
}

h1 {
  font-size: 36px;
}

mark,
strong {
  font-size: inherit;
  font-family: inherit;
}

p,
a,
li,
span,
div,
input,
textarea {
  font-family: inherit;

}

p {
  font-size: 18px;
  line-height: 1.5;
  text-align: justify;
}


/* general element properties */
img {
  /* max-width: 80%; */
  height: auto;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#site {
  width: 100%;
}


div#page-content {
  /* margin: 40px 0; */
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
    min-height: 50vh;

}

div#page-content>* {
  margin-left: 5vw;
  margin-right: 5vw;
  max-width: 800px;
  width: -webkit-fill-available;
  /* Chrome, Safari */
  width: -moz-available;
  /* Firefox */
  width: fill-available;
  /* standard, en développement */
  /* text-align: left; */
}

/* icones */
i {
  font-family: "FontAwesome";
  font-size: inherit;
  color: inherit;
  display: initial;
}


/* affichage global et organisation des pages (menu latéral) */
body {
  display: flex;
  flex-direction: row;
  min-height: 100vh;
}





/* listes d'articles */



div.articles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;

}


div.articles>* {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  flex: 1 1 300px;
  outline: none;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  max-width: 500px;

  display: flex;
  flex-direction: row;
  gap: 20px;

  transition: all var(--transition-duration);
  cursor: pointer;
}

div.articles>*>div {
  display: flex;
  flex-direction: column;
}

div.articles>*:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);

}

div.articles>*>img {
  border-radius: 4px;
  max-width: 100px;
  height: 100px;
  object-fit: cover;
}

div.articles div.content h2 {
  font-size: 24px;
  margin: 0;
  margin-bottom: 10px;
}


h6.category a {
  color: var(--systemoun-strong-color);
  font-size: 14px;
  /* text-transform: uppercase; */
  margin-bottom: 10px;
  text-decoration: none;
}

h6.category a:hover {
  text-decoration: underline;
}

div.articles div.content-preview,
p.content-preview {
  font-size: 16px;
  color: #565656;
  margin-top: 10px;
}

/* Bandeau sous le menu de navigation */
.healththeme-banner {
  width: 100%;
  background: var(--systemoun-strong-color, #19744C);
  color: #fff;
  text-align: center;
  padding: 16px 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.5px;
  /* margin-bottom: 24px; */
}



































/* Pagination */
/*  < Précédent 3 4 5 Suivant> */
nav[aria-label="pagination"]>ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  margin: 40px 0;
  padding: 0;
}

nav[aria-label="pagination"]>ul>li {
  list-style: none;
  /* margin: 0 5px; */
}

nav[aria-label="pagination"]>ul>li.active>span {
  background-color: var(--systemoun-strong-color);
  color: #fff;

  &:hover {
    background-color: var(--systemoun-strong-color);
    filter: unset;
  }
}

nav[aria-label="pagination"]>ul>li.active>span {
  color: #fff;
}


nav[aria-label="pagination"]>ul>li>a,
nav[aria-label="pagination"]>ul>li>span {
  text-decoration: none;
  color: var(--systemoun-strong-color);
  padding: 6px 12px;
  width: 100%;
  /* border: solid 1px  var(--systemoun-strong-color); */
  border-radius: 12px;
  font-family: 'Manrope', sans-serif;
  font-size: 18px;
  font-weight: 500;
  transition: all 0.2s ease-in-out;

  &:hover {
    background-color: #e8e8e8;
    filter: unset;
  }

}



/* mobile */

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


  /* affichage global et organisation des pages (menu latéral) */
  body {
    flex-direction: column;
  }

  .computer-only {
    display: none;
  }



}