/*
 Theme Name:   Observandi Child
 Theme URI:    https://generatepress.com
 Description:  Observandi GeneratePress child theme
 Author:       Núria Ramoneda
 Author URI:   https://nuriaramoneda.cat
 Template:     generatepress
 Version:      0.1
*/

:root {
  --black: #000000;
  --fosc: #3d3d3d;
  --marca: #0a9cae;
  --white: #ffffff;
  --contra: #fcc500;
  --blau: #5bc5f2;
  --gp-font--body: "Work Sans", sans-serif;
  --gp-font--headings: "DM Serif Display", serif;
}

body {
  margin: 0;
  padding: 0;
}

body * {
  box-sizing: border-box;
}

p,
li,
a {
  color: var(--fosc);
}

ol,
ul ol.wp-block-list,
ul.wp-block-list {
  margin-inline: 0;
  padding-left: 1.05rem;
}

/* =========================
   TYPOGRAPHY
========================= */

/* Font Family Utilities */
.ff-body {
  font-family: var(--gp-font--body);
}

.ff-heading {
  font-family: var(--gp-font--headings);
}

/* Heading and utility class font assignment */
h1,
h2,
[class^="fs-"] {
  font-family: var(--gp-font--headings);
}

h3,
h4,
h5,
h6,
[class^="fs-"] {
  font-family: var(--gp-font--body);
}

.fs-p {
  font-family: var(--gp-font--body);
}

/* =========================
   FLUID TYPOGRAPHY SCALE
   Source: https://theadminbar.com/simple-responsive-font-size-calculator/
========================= */

h1,
.h1 {
  /*font-size: clamp(3.375rem, 3.0682rem + 1.2273vw, 4.05rem);*/
  font-size: clamp(2.375rem, 2.102rem + 1.364vi, 3.125rem);
  font-weight: 600;
}

h2,
.h2 {
  font-weight: 600;
  font-size: clamp(2.125rem, 1.875rem + 1.25vi, 2.813rem);
  margin-bottom: 4rem;
}

h2:has(+ p) {
  margin-bottom: 3rem;
}

h3,
.h3 {
  font-size: clamp(1.563rem, 1.335rem + 1.136vi, 2.188rem);
  font-weight: 600;
}

h4,
.h4 {
  font-size: clamp(1.6875rem, 1.5341rem + 0.6136vw, 2.025rem);
}

h5,
.h5 {
  font-size: clamp(1.4063rem, 1.2784rem + 0.5114vw, 1.6875rem);
}

h6,
.h6 {
  font-size: clamp(1.2656rem, 1.1506rem + 0.4602vw, 1.5188rem);
}

p,
.p,
p.gbp-section__text,
li {
  font-size: clamp(0.9375rem, 0.8523rem + 0.3409vw, 1.125rem);
}

/* end typography section */

.site-logo img {
  max-width: 150px;
  height: auto;
}
footer {
  padding-top: 40px;
}
footer
  .wp-block-navigation
  .wp-block-navigation-item__content.wp-block-navigation-item__content {
  color: var(--blau);
}

footer
  .wp-block-navigation
  .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
footer
  .wp-block-navigation
  .wp-block-navigation-item__content.wp-block-navigation-item__content:focus,
footer
  .cozy-nav-hover-color.wp-block-navigation__container.wp-block-navigation
  > .wp-block-navigation-item:hover
  > .wp-block-navigation-item__content,
footer
  .cozy-nav-hover-color.wp-block-navigation__container.wp-block-navigation
  > .wp-block-navigation-item:focus
  > .wp-block-navigation-item__content {
  color: var(--contra) !important;
}

.page:not(.home) header {
  border-bottom: 1px solid var(--fosc);
}

.wp-block-list {
  padding-left: 1.3rem;
}

.wp-block-list li {
  margin-bottom: 0.7rem;
  line-height: 1.5;
}

@media screen and (max-width: 768px) {
  .wp-block-list li {
    margin-bottom: 0.2rem;
    line-height: 1.2;
  }
}

/* botons */

.gbp-button--primary {
  cursor: pointer;
}

.wp-block-uagb-buttons .wp-block-button__link,
.wp-block-uagb-buttons .wp-block-uagb-button__link,
.wpcf7-submit {
  background-color: var(--marca) !important;
  color: var(--white) !important;
  border: 1px solid var(--marca) !important;
  border-radius: 24px;
  font-size: 1rem !important;
  font-weight: normal !important;
}

.wp-block-uagb-buttons .wp-block-button__link strong,
.wp-block-uagb-buttons .wp-block-uagb-button__link strong,
.wpcf7-submit strong {
  font-weight: 400 !important;
}

.wp-block-uagb-buttons .wp-block-button__link:hover,
.wp-block-uagb-buttons .wp-block-button__link:focus,
.wpcf7-submit:hover,
.wpcf7-submit:focus {
  background-color: var(--white) !important;
  color: var(--marca) !important;
}

.obs-grid-imgs {
  display: grid;
  max-width: 70%;
  grid-template-columns: repeat(auto-fit, minmax(133px, 1fr));
  gap: 20px;
  align-items: center;
  justify-content: center;
}

.obs-grid-imgs figure {
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.obs-grid-imgs figure img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 133px;
}

main p {
  margin-block-end: 1rem;
}
.main-navigation .main-nav ul li a {
  font-weight: bold;
  font-size: 1.25rem;
}

.btn-full {
  width: 100% !important;
}

body .is-layout-flex {
  flex-wrap: wrap;
  align-items: stretch !important;
}

.obs-flex-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.obs-flex-cols .wp-block-columns .wp-block-column:last-child p {
  margin-top: 0;
  margin-bottom: 15px;
}
.obs-flex-cols .wp-block-columns .wp-block-column:last-child h3 {
  margin-bottom: 15px;
}

.obs-flex-cols
  .wp-block-columns
  .wp-block-column:last-child
  h3
  + p:last-of-type {
  margin-bottom: 30px !important;
}

.obs-flex-cols
  .wp-block-columns
  .wp-block-column:last-child
  h3
  + p:last-of-type {
  flex: 1 0 auto;
  margin-bottom: 30px !important;
}
/* p:nth-last-of-type(2) */

.obs-flex-cols .wp-block-columns .wp-block-column:last-child > .wp-block-group {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.obs-flex-cols
  .wp-block-columns
  .wp-block-column:last-child
  > .wp-block-group
  .wp-block-uagb-buttons {
  margin-top: 0;
}

.obs-flex-cols
  .wp-block-columns
  .wp-block-column:last-child
  .wp-block-uagb-buttons {
  margin-top: 30px;
}

.obs-flex-cols .blockbooster-service-box {
  flex: 1 1 calc(50% - 20px);
  box-sizing: border-box;
  margin: 0;
}

@media screen and (max-width: 768px) {
  .obs-flex-cols .blockbooster-service-box {
    flex: 1 1 100%;
  }
}

/* testimonials grid */

.cozy-block-grid-wrapper {
  display: grid;
  grid-auto-flow: column;
}
.cozy-block-grid > .wp-block-group {
  display: flex;
  flex-direction: column;
}
.cozy-block-grid .wp-block-group p:last-of-type {
  flex: 1 0 auto;
}

.cozy-block-grid,
.cozy-block-grid > .wp-block-group {
  height: 100%;
}

@media screen and (max-width: 568px) {
  .cozy-block-grid-wrapper {
    grid-auto-flow: row;
  }
}

/* equip */

.obs-equip-conjunt {
  max-width: 728px;
  gap: 0;
}

.obs-equip-conjunt .flip-container {
  border: none;
}
.obs-equip-conjunt * {
  box-sizing: border-box;
}

.obs-equip-conjunt .front .wp-block-image {
  margin-bottom: 0;
}
.obs-equip-conjunt .front .wp-block-heading {
  width: 100%;
  padding-block: 10px;
  border: 1px solid #dddddd;
  border-top: 0;
}

.obs-equip-conjunt .back {
  top: 2px;
  height: 537px;
  border: 1px solid #dddddd;
  padding: 15px 15px 0 15px;
  justify-content: flex-start;
}
.obs-equip-conjunt .back p {
  margin-bottom: 0 !important;
}
.obs-equip-conjunt .back p.team-quote {
  margin-top: 0;
}

@media (max-width: 767px) {
  #equip,
  #equip .flipping-cards {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  #equip .flipping-cards .team-member {
    max-width: 400px;
    margin-inline: auto;
  }
}
.wp-block-uagb-marketing-button {
  margin-top: 50px;
}

/* a quin ens adrecem */

@media screen and (max-width: 768px) {
  .obs-tipus-clients .is-layout-flex.col-reverse {
    flex-direction: column-reverse;
  }
}

.obs-tipus-clients figure img {
  width: 100%;
  height: auto;
  max-height: 324px;
  display: block;
  object-fit: cover;
  border-radius: 45px !important;
}

/* end a quin ens adrecem */

.obs-perque figure {
  display: flex;
  justify-content: center;
  margin: 0 !important;
  align-items: center;
}

.obs-perque img {
  max-width: 300px;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* serveis */

.obs-projectes h3 {
  line-height: 1.2 !important;
}

@media screen and (max-width: 1023px) {
  .obs-projectes .grid-serveis > div {
    display: block;
    margin-bottom: 0;
  }
  .obs-projectes figure {
    margin-bottom: 20px;
  }
}

/* clients */

.obs-grid-imgs figure {
  display: flex;
  justify-content: center;
  margin: 0 !important;
  align-items: center;
}

.obs-grid-imgs figure img {
  max-width: 130px;
}

@media screen and (max-width: 480px) {
  .obs-grid-imgs {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 481px) and (max-width: 768px) {
  .obs-grid-imgs {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .obs-grid-imgs {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* contact form */

/*
** Contact Form 7 basics
**
**/

/* Form width  and border */

.wpcf7 {
  text-align: left;
  width: 100%;
  padding: 20px 30px;
  background-color: var(--gris-basic);
  background-position: center;
  background-size: cover;
  border-radius: 20px;
}

@media screen and (max-width: 768px) {
  .wpcf7 {
    max-width: 550px;
    margin: 0 auto;
  }
}

/* Input Field widths */

input.wpcf7-text,
textarea.wpcf7-textarea {
  width: 100%;
  background-color: var(--white);
  border: 1px solid #e4e4e4;
  border-radius: 10px;
  color: var(--fosc);
  box-shadow:
    inset 1px 1px 1px rgba(0, 0, 0, 0.4),
    0 0 1px rgba(0, 0, 0, 0);
}

.wpcf7-text {
  height: 50px;
  padding-left: 10px;
}

/* Input Field borders */

/* Input Field Text color */

.wpcf7-text:focus,
.wpcf7-textarea:focus {
  border-color: #8f8f8f;
}

/* Label Font */

.wpcf7-form p {
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  color: #000;
}

/* Submit button Font */

.wpcf7-submit {
  width: fit-content;
  min-width: 200px;
  padding-top: calc(0.667em + 2px);
  padding-right: calc(1.333em + 2px);
  padding-bottom: calc(0.667em + 2px);
  padding-left: calc(1.333em + 2px);
  margin-top: 30px;
  font-size: 1rem;
  font-weight: bold;
}

p.obs-top-text {
  color: var(--contra) !important;
  font-size: 0.9rem !important;
  background: none !important;
  text-transform: uppercase;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Response messages - Error & Success */

.wpcf7-response-output {
  margin-bottom: 30px !important;
}

/* footer */

@media (max-width: 768px) {
  /*   .footer-nav .gb-menu-toggle {
    display: none;
  } */

  /*   .footer-nav .gb-menu-container {
    display: block !important;
  } */

  .footer-nav ul.gb-menu {
    display: block !important;
    text-align: center;
  }
  .footer-nav ul.gb-menu li {
    display: inline-block;
    float: none;
    padding: 0 10px; /* Adjust spacing between items */
  }
}