/*--------------------------------------------------------------
## Variables
# Modificar por los colores y tamaños de letra que correspondan a la marca así como el ancho del contenido
--------------------------------------------------------------*/

:root {

  /* Estos colores debemos también cargarlos en el archivo inc/theme-editor.php */
  --color-primary-dark: hsl(252, 84%, 24%);
  --color-primary: hsl(252, 84%, 44%);
  --color-primary-light: hsl(252, 84%, 64%);
  --color-primary-washed: hsl(252, 64%, 95%);

  --color-secondary-dark: hsl(169, 79%, 49%);
  --color-secondary: hsl(169, 79%, 69%);
  --color-secondary-light: hsl(169, 79%, 89%);
  --color-secondary-washed: hsl(169, 79%, 95%);

  --color-tertiary-dark: hsl(354, 61%, 34%);
  --color-tertiary: hsl(354, 61%, 54%);
  --color-tertiary-light: hsl(354, 61%, 74%);
  --color-tertiary-washed: hsl(354, 61%, 95%);

  --color-gray-light: hsl(0, 0%, 95%);
  --color-gray-medium-light: hsl(0, 0%, 85%);
  --color-gray-medium-dark: hsl(0, 0%, 30%);
  --color-gray-dark: hsl(0, 0%, 20%);
  --color-black: hsl(0, 0%, 0%);
  --color-white: hsl(0, 0%, 100%);

  /* El enlace a la fuente desde Google debemos incluirlo en el archivo inc/theme-scripts.php */
  --font-family-primary: "Manrope", sans-serif;
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --font-weight-light: 300;

  /* Estos tamaños de fuente debemos también cargarlos en el archivo inc/theme-editor.php */
  --font-size-01: 3rem;
  --font-size-02: 2.25rem;
  --font-size-03: 1.5rem;
  --font-size-04: 1.25rem;
  --font-size-05: 1.1rem;
  --font-size-06: .875rem;
  --font-size-07: .75rem;
  
  --base-content-width: 50rem;
  --wide-content-width: 80rem;
}


/*--------------------------------------------------------------
## Color Palette
# No debería de ser necesario moficiarlo a no ser que el diseño tenga más colores que los propuestos
--------------------------------------------------------------*/


.has-primary-dark-color { color: var(--color-primary-dark); }
.has-primary-dark-background-color { background-color: var(--color-primary-dark); }
.has-primary-color { color: var(--color-primary); }
.has-primary-background-color { background-color: var(--color-primary); }
.has-primary-light-color { color: var(--color-primary-light); }
.has-primary-light-background-color { background-color: var(--color-primary-light); }
.has-primary-washed-color { color: var(--color-washed-primary); }
.has-primary-washed-background-color { background-color: var(--color-primary-washed); }

.has-secondary-dark-color { color: var(--color-secondary-dark); }
.has-secondary-dark-background-color { background-color: var(--color-secondary-dark); }
.has-secondary-color { color: var(--color-secondary); }
.has-secondary-background-color { background-color: var(--color-secondary); }
.has-secondary-light-color { color: var(--color-secondary-light); }
.has-secondary-light-background-color { background-color: var(--color-secondary-light); }
.has-secondary-washed-color { color: var(--color-washed-secondary); }
.has-secondary-washed-background-color { background-color: var(--color-secondary-washed); }

.has-tertiary-dark-color { color: var(--color-tertiary-dark); }
.has-tertiary-dark-background-color { background-color: var(--color-tertiary-dark); }
.has-tertiary-color { color: var(--color-tertiary); }
.has-tertiary-background-color { background-color: var(--color-tertiary); }
.has-tertiary-light-color { color: var(--color-tertiary-light); }
.has-tertiary-light-background-color { background-color: var(--color-tertiary-light); }
.has-tertiary-washed-color { color: var(--color-washed-tertiary); }
.has-tertiary-washed-background-color { background-color: var(--color-tertiary-washed); }

.has-gray-light-color { color: var(--color-gray-light); }
.has-gray-light-background-color { background-color: var(--color-gray-light); }
.has-gray-medium-light-color { color: var(--color-gray-medium-light); }
.has-gray-medium-light-background-color { background-color: var(--color-gray-medium-light); }
.has-gray-medium-dark-color { color: var(--color-gray-medium-dark); }
.has-gray-medium-dark-background-color { background-color: var(--color-gray-medium-dark); }
.has-gray-dark-color { color: var(--color-gray-dark); }
.has-gray-dark-background-color { background-color: var(--color-gray-dark); }
.has-black-color { color: var(--color-black); }
.has-black-background-color { background-color: var(--color-black); }
.has-white-color { color: var(--color-white); }
.has-white-background-color { background-color: var(--color-white); }



/*--------------------------------------------------------------
## Typography
# Podemos ajustar si los el peso de la fuente de los títulos y el color base del texto y enlaces de la web
--------------------------------------------------------------*/


body {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  color: var(--color-black);
}

a {
  color: var(--color-primary);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-bold);
}

h1, .has-f-1-font-size {
  font-size: var(--font-size-01);
}

h2, .has-f-2-font-size {
  font-size: var(--font-size-02);
}

h3, .has-f-3-font-size {
  font-size: var(--font-size-03);
}

h4, h5, h6, .has-f-4-font-size {
  font-size: var(--font-size-04);
}

p, .has-f-5-font-size {
  font-size: var(--font-size-05);
}

small, .has-f-6-font-size {
  font-size: var(--font-size-06);
}

/*--------------------------------------------------------------
## Custom classes
# Añadimos todas las clases personalizadas necesarias y que se usen a lo largo de toda la web
--------------------------------------------------------------*/

    

/*--------------------------------------------------------------
## Header
# Ajustar según sea necesario
--------------------------------------------------------------*/

.contact-button span {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
  margin-right: .5rem;
  padding: .5rem 1rem;
  border-radius: .5rem;
  display: inline-block;
}

#mobile-navigation {
  padding-top: 1rem;
  --mm-listitem-size:  48px;
}

#mobile-navigation.mm-listitem {
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

#mobile-navigation.mm-menu_theme-white {
  --mm-color-border: transparent;
  --mm-color-button: var(--color-primary-dark);
  --mm-color-text: var(--color-primary-dark);
  --mm-color-text-dimmed: var(--color-primary-dark);
  --mm-color-background: var(--color-white);
  --mm-color-background-highlight: var(--color-white);
  --mm-color-background-emphasis: var(--color-white);
  --mm-shadow: none;
}

#secondary-menu {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
}
#secondary-menu li {
  padding: 0;
  list-style-type: none;
}
#secondary-menu a {
  text-decoration: none;
}

/*--------------------------------------------------------------
## Footer
# Ajustar según sea necesario
--------------------------------------------------------------*/

#menu-footer-navigation {
  margin: 0;
  padding: 0;
}

#menu-footer-navigation li {
  padding: 0;
  list-style-type: none;
}

#menu-footer-navigation a  { 
  display: inline-block;
  text-decoration: none;
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  margin: 1em 0;
}



/*--------------------------------------------------------------
## General Structure
# No debería de ser necesario modificarlo
--------------------------------------------------------------*/

.entry-content > * {
  margin: 2rem auto;
  max-width: var(--base-content-width);
  padding-left: 1rem;
  padding-right: 1rem;
}

.alignwide {
  max-width: var(--wide-content-width);
  padding-left: 1rem;
  padding-right: 1rem;
}

.alignfull {
  margin: 1.5rem 0;
  max-width: 100%;
  padding: 0;
}

.has-background {
  padding: 1rem;
}

/*--------------------------------------------------------------
## Embeds
# No debería de ser necesario modificarlo
--------------------------------------------------------------*/

.wp-block-embed.type-video > .wp-block-embed__wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
}

.wp-block-embed.type-video > .wp-block-embed__wrapper > iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/*--------------------------------------------------------------
## Gallery
# No debería de ser necesario modificarlo
--------------------------------------------------------------*/

.wp-block-gallery:not(.components-placeholder) {
  margin: 1.5rem auto;
}

/*--------------------------------------------------------------
## Group
# No debería de ser necesario modificarlo
--------------------------------------------------------------*/

.wp-block-group > .wp-block-group__inner-container > *:not(.entry-content) {
  max-width: var(--base-content-width);
  margin: 2rem auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.wp-block-group > .wp-block-group__inner-container > .alignwide {
  max-width: var(--wide-content-width);
}

.wp-block-group > .wp-block-group__inner-container > .alignfull {
  max-width: 100%;
}

.wp-block-group.has-background > .wp-block-group__inner-container > :first-child {
  margin-top: 0;
}

.wp-block-group.has-background > .wp-block-group__inner-container > .alignfull {
  width: calc( 100% + 4rem );
  max-width: calc( 100% + 4rem );
  position: relative;
  left: -2rem;
}
.widget-area .wp-block-group.has-background {
  padding: 1rem;
}

/*--------------------------------------------------------------
## Image
# No debería de ser necesario modificarlo
--------------------------------------------------------------*/

.wp-block-image img {
  display: block;
}

.wp-block-image.alignleft,
.wp-block-image.alignright {
  width: 100%
}

.wp-block-image.alignfull img {
  width: 100vw;
}

.wp-block-image .alignleft img,
.wp-block-image .alignright img,
.wp-block-image .alignleft figcaption,
.wp-block-image .alignright figcaption {
  max-width: 100%;
  width: 100%;
}

/*--------------------------------------------------------------
## List
# No debería de ser necesario modificarlo
--------------------------------------------------------------*/

.entry-content ul,
.entry-content ol {
  margin: 1rem auto;
  list-style-position: outside;
}

.entry-content li {
  margin-left: 1rem;
}

.entry-content ul ul,
.entry-content ol ol,
.entry-content ul ol,
.entry-content ol ul {
  margin: 0 auto;
}

.entry-content ul ul li,
.entry-content ol ol li,
.entry-content ul ol li,
.entry-content ol ul li {
  margin-left: 0;
}


/*--------------------------------------------------------------
## Quote
# No debería de ser necesario modificarlo
--------------------------------------------------------------*/

.wp-block-quote {
  margin-left: 1rem;
  margin-right: 1rem;
  padding: 0;
}

.wp-block-quote > * {
  margin-left: 1rem;
}

.wp-block-quote.is-large, 
.wp-block-quote.is-style-large {
  margin: 2rem auto;
  padding: 0;
}

.wp-block-quote.is-large cite, 
.wp-block-quote.is-large footer, 
.wp-block-quote.is-style-large cite, 
.wp-block-quote.is-style-large footer {
  font-size: var(--font-size-06);
}

@media screen and (min-width: 60em) {
  .wp-block-quote {
    margin: 2rem auto;
  }
}

/*--------------------------------------------------------------
## Separator
# No debería de ser necesario modificarlo
--------------------------------------------------------------*/

.wp-block-separator {
  margin: 1rem auto;
  padding: 0;
}

/*--------------------------------------------------------------
## Table
# No debería de ser necesario modificarlo
--------------------------------------------------------------*/

.wp-block-table {
  overflow-x: auto;
  margin-left: 1rem;
  margin-right: 1rem;
  width: calc( 100% - 2rem );
}

.wp-block-table table {
  border-collapse: collapse;
  width: 100%
}

.wp-block-table td, .wp-block-table th {
  padding: .5rem;
}

@media screen and (min-width: 60em) {
  .wp-block-table {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}

/*--------------------------------------------------------------
## Media Text
# No debería de ser necesario modificarlo
--------------------------------------------------------------*/

.wp-block-media-text {
  column-gap: 1rem;
}
.wp-block-media-text .wp-block-media-text__content {
  padding: 0;
}


/*--------------------------------------------------------------
## Button
# Ajustar estilo según el diseño
--------------------------------------------------------------*/

.wp-block-button__link {
  padding: calc(.5rem + 2px) calc(1rem + 2px);
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
}
.is-style-outline>.wp-block-button__link, .wp-block-button__link.is-style-outline {
  padding: .5rem 1rem;
}

.wp-block-button__link {
  border-radius: .5rem;
  text-transform: uppercase;
}



/*--------------------------------------------------------------
## Sitemap
# Ajustar estilo según el diseño
--------------------------------------------------------------*/

.wsp-pages-title,
.wsp-posts-title {
  font-size: var(--font-size-03);
}

.wsp-pages-list,
.wsp-posts-list {
  margin-left: 0;
}

.wsp-pages-list li,
.wsp-posts-list li {
  margin-bottom: .5rem;
}


/*--------------------------------------------------------------
## Home
# Ajustar estilo según el diseño
--------------------------------------------------------------*/

.home .site-main > .hentry {
  margin-top: 0;
}
.home .site-main > .hentry > .entry-content{
  margin-top: 0;
}


/*--------------------------------------------------------------
## Bredcrumbs
# Ajustar estilo según el diseño
--------------------------------------------------------------*/

#breadcrumbs a {
  text-decoration: none;
  color: inherit;
}


/*--------------------------------------------------------------
## Pagination
# Ajustar estilo según el diseño
--------------------------------------------------------------*/

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 .5rem;
  width: 100%;
}
.pagination > * {
  padding: .5rem 1rem;
  border-radius: .5rem;
  background-color: var(--color-gray-light);
  display: inline-block;
  text-decoration: none;
  margin: 0 .5rem;
}