/*
Theme Name: Mon Thème
*/

@import url('https://fonts.googleapis.com/css2?family=Lalezar&family=Lexend+Deca:wght@100..900&family=Lexend+Exa:wght@100..900&display=swap');

:root {
  --primary: #0d00a4;
  --secundary: #22007c;
  --tertiary: #140152;
  --quaternary: #04052e;
  --quinary: #02010a;
  --clear: rgba(0, 0, 0, 0);

  --text-color: white;

  --deca: 'Lexend Deca';
  --lezar: 'lalezar';
  --exa: 'Lexend Exa';

  --xxl: clamp(2rem, 5vw, 4rem);
  --xl: clamp(1.5rem, 3vw, 3rem);
  --l: clamp(1rem, 2vw, 1rem);

  --title-page: clamp(2rem, 5vw, 3rem);

  --title-section: clamp(2rem, 5vw, 3rem);
  --subtitle-section: clamp(2rem, 5vw, 3rem);

  --title-align: center;

  --background-hero: linear-gradient(to bottom, var(--clear), var(--tertiary)), url(https://bxlr.emu.isfsc.be/wp-content/uploads/2026/01/pexels-teddy-2263436-scaled.jpg);
  --background-body: linear-gradient(to bottom, var(--tertiary), var(--quinary));

  --center-flex: flex center center;
  --hero-size: 100vh 100%;
  --hero-padding: 20px;
}



/* -----------------------------------------------------
                  COMMON STYLES 
-------------------------------------------------------*/

/* BACKGROUND
---------------- */

.hero {
  height: 100vh;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;

}

.hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: linear-gradient(to bottom, var(--clear), var(--tertiary)), url(https://bxlr.emu.isfsc.be/wp-content/uploads/2026/01/pexels-teddy-2263436-scaled.jpg);;
  background-size: cover;
  background-position: center;
}

.body-bg {
  background: var(--background-body);
  padding: 0%;
  margin: 0%;
}

.footer {
  background-color: var(--quinary);
}


/* FONTS 
---------------- */

/* FONT FAMILIY  */


h1 {
  font-family: var(--lezar);
}

.hero h2 {
  font-family: var(--deca);
}

h2 {
  font-family: var(--lezar)
}

h3,
p,
.btn,
input,
.nav-link, label, #main-content {
  font-family: var(--deca);
}

.footer .nav-link {
  font-family: var(--exa);
}

.card-title {
  font-family: var(--lezar);
}

.card-subtitle {
  font-family: var(--exa);
}

h6 {
  font-family: var(--exa);
}

.step {
  font-family: var(--lezar);
  font-size:clamp(1.25rem, 2.5vw, 2rem) !important;
}

/* TEXT COLOR */

h1,
h2,
h3,
h4,
h5,
p,
.card-title,
.card-subtitle,
label,
#main-content {
  color: var(--text-color);
}

h6 {
  color: white;
}

.page-container div {
  color:white !important;
  font-size: var(--l);
  font-family: var(--deca);
}

.footer .nav-link {
  color: rgba(255, 255, 255, 0.719);
}


/* TEXT POSITION & SIZE */

.page-container { height: auto; }

h1 {
  font-size: var(--xxl);
  z-index: 1;
}

.hero h2 {
  font-size: var(--l);
  z-index: 1;
}

.hero .btn {
  font-size: var(--l) !important;
  z-index: 1;
}

h2,
h3 {
  font-size: var(--xl);
}

.btn,
p,
.nav-link,
.badge,
.card-title,
.card-subtitle,
input,
li, #main-content, h5 {
  font-size: var(--l) !important;
}


h1,
h2 {
  text-align: center;
}

.btn {
  align-self: center;
}

.um .um-form .um-field-label label,
.um .um-form .um-field-area input,
.um .um-form .um-field-area select,
.um .um-form .um-field-area textarea,
.um .um-form .um-half a,
.um .um-form .um-half input {
  font-size: var(--l) !important;
}


/* SECTIONS 
---------------- */



.about {
  justify-content: center;
  align-items: center;
  padding: 2rem 0rem;
}

.latest .col-sm-4 {
  border: solid white 2px;
  border-radius: 25px;
  margin: 0.5rem 0rem;
  padding: 1rem !important;
}

.latest .row {
  margin: 0px;
}

.body-bg {
  padding: 1rem;
}

/* COMPONENTS
---------------- */

/* CARDS */

.card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border-radius: 25px;
}

.card-img-top {
  border-radius: 25px 25px 10px 5px;
}

.card .badge {
  border: solid white 2px;
}

/* BUTTONS */

.connexion-2 {
  background-color: var(--primary);
}

.connexion-2:hover {
  background-color: var(--primary);
  filter: brightness(150%);
}

.btn-primary {
	background-color: var(--primary);
	border:hidden;
}

.btn-primary:hover {
	background-color: var(--primary);
	border:hidden;
	filter: brightness(120%)
}

/* PAGINATION */

.page-link {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border-radius: 25px;
  margin: 0rem 0.5rem;
  font-family: var(--exa);
  color: white;
  font-size: var(--l);
}

.current {
  background-color: var(--primary) !important;
}

/* ULTIMATE MEMBER FAVORITES */

.um-favorite-separator {
    border: 0;
    border-top: 1px solid #ddd;
    margin: 20px 0;
    opacity: 0.6;
}

.um-profile-post--favorite {
	display: flex;
	justify-content: center;
}

.um-profile-post-content {
	padding:1rem;
}

.um-profile-post-thumb {
	display: flex;
	align-items: center;
}

.um-profile-post-thumb img {
	border-radius: 25px;
}

.um-profile-nav {
	background-color:rgba(255,255,255,0.1);
}

.um-form a{
	color:white !important;
}

.um-profile-nav-item.active a {
    background-color:var(--primary) !important;
}



/* SINGLE POST
---------------- */

.single-post img {
  border-radius: 25px;
}

.single-post h1 {
  text-align: start;
}

.single-post {
  color: white;
}


/* CHECKBOX
---------------- */

.hidden-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.check-label {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border-radius: 25px;
  margin: 0.5rem 0.5rem;
  font-family: var(--exa);
  color: white;
  display: inline-block;
  padding: 8px 16px;
  border-radius: 50px;
  cursor: pointer;
  transition: 0.2s ease;
  font-size: var(--l);
}

.hidden-checkbox:checked+.check-label {
  background-color: var(--primary);
  color: white;
}

/* ANIMATIONS
---------------- */
  .glow_text,
  .navbar .nav-link {
    position: relative;
    background: transparent;
    color: #f5f5f5;
    -o-text-overflow: clip;
    text-overflow: clip;
    text-shadow: none;

    transition: all 0.2s linear;
    /* vendorless fallback */
    -o-transition: all 0.2s linear;
    /* opera */
    -ms-transition: all 0.2s linear;
    /* IE 10 */
    -moz-transition: all 0.2s linear;
    /* Firefox */
    -webkit-transition: all 0.2s linear;
    /*safari and chrome */
  }

  .glow_text:hover,
  .navbar .nav-link:hover {

    text-shadow:
      0 0 5px rgb(255, 255, 255, 0.5),
      0 0 10px rgb(255, 255, 255, 0.5),
      0 0 20px rgb(255, 255, 255, 0.5),
      0 0 30px rgb(255, 255, 255, 0.5);
  }




  .card:hover {
    box-shadow:
      0 0 5px rgb(255, 255, 255, 1),
      0 0 10px rgb(255, 255, 255, 1),
      0 0 20px rgb(255, 255, 255, 1),
      0 0 30px rgb(255, 255, 255, 1);

    transition: all 0.2s linear;
  }


  p.glow_text span.inner {
    position: relative;
    z-index: 2;
  }


/* -----------------------------------------------------
                  DESKTOP LAYOUT 
-------------------------------------------------------*/

@media screen and (min-width:30.001rem) {

  .btn {
    width: fit-content;
    padding: 1rem 2rem;
  }

  .recent p {
    text-align: center;
  }

  .about,
  .recent,
  .latest,.page-container {
    min-height: 70vh;
    height: auto;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
  }

  .latest .row {
    gap: 4rem;
  }

  .latest .col-sm-4 {
    flex: 1 1 0;
    gap: 2rem;
    min-width: 0;
  }

  .recent .row {
    width: 70vw;
    display: flex;
    justify-self: center;
  }

  .posts { display: block; height: auto; text-align: left;
padding: 0rem 5rem}

  .pagination {
    margin: 2rem 2rem;
  }

  .single-post  {
padding : 5rem 20rem !important;
  }

  .page-container {
    align-self: center;
  }

  /* Make UM forms bigger and more readable */
.um {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}

.um .um-form {
  padding: 2rem;
}

.um .um-field,
.um .um-field * {
  font-size: var(--l) !important;
}

.um input,
.um select,
.um textarea {
  padding: 1rem !important;
  font-size: var(--l) !important;
}

.um .um-field {
  margin-bottom: 1.5rem;
}

.navbar-nav {
  display: flex;
  justify-content: space-around !important;
  width: 60%; /* this is the missing piece */
  margin: 0% 20% !important;
}

.navbar {
  position: sticky;
  top: 0;
  z-index: 5;
}

.summary p, h2 {text-align:center;
	margin: 4rem;
}

}






.page-container { height: auto; }

.um-favorite-separator {
    border: 0;
    border-top: 1px solid #ddd;
    margin: 20px 0;
    opacity: 0.6;
}

.um-profile-post--favorite {
	display: flex;
	justify-content: center;
}

.um-profile-post-content {
	padding:1rem;
}

.um-profile-post-thumb {
	display: flex;
	align-items: center;
}

.um-profile-post-thumb img {
	border-radius: 25px;
}