/*
Theme Name: Book Theme
Theme URI: https://example.com/book-theme
Author: Your Name
Author URI: https://example.com
Description: A clean, elegant FSE theme designed for authors and book promotion.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: book-theme
Tags: full-site-editing, block-patterns, blog, one-column, custom-colors, custom-menu, editor-style
*/

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  scroll-margin-top: 2rem;
}

:where(.wp-site-blocks) > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

.intro {
  max-width: 45ch;
}

ul.arrow-list {
  list-style: none;
  margin-top: 0.5rem !important;
  padding-left: 0;
}

ul.arrow-list > li {
  position: relative;
  padding-left: 1.25rem;
}

ul.arrow-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 1rem;
  height: 1rem;
  background-image: url("././assets/icons/arrow.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

p {
  text-wrap: pretty;
}

a:hover {
  color: var(--wp--preset--color--coral);
  text-decoration: none;
}

.comprar-libro {
  background-color: var(--wp--preset--color--dark-blue);
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
}

@media (max-width: 768px) {
  .comprar-libro {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

.comprar-libro p {
  color: var(--wp--preset--color--white);
}

.wp-element-button {
  width: fit-content;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow, transform;
  color: var(--wp--preset--color--white);
  background-color: var(--wp--preset--color--coral);
  border: 0;
  border-radius: 4px;
  justify-content: center;
  block-size: fit-content;
  padding: 0.75rem 1rem 1rem 1rem;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: box-shadow 0.15s, transform 0.15s, -webkit-box-shadow 0.15s, -webkit-transform 0.15s;
  display: inline-flex;
  box-shadow: 0 2px 4px var(--wp--preset--color--dark-blue), 0 7px 13px -3px var(--wp--preset--color--dark-blue),
    inset 0 -4px var(--wp--preset--color--dark-coral);
}

.wp-element-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px var(--wp--preset--color--dark-blue), 0 7px 13px -3px var(--wp--preset--color--dark-blue),
    inset 0 -4px var(--wp--preset--color--dark-coral);
  color: var(--wp--preset--color--white);
}

.wp-element-button:active {
  transform: translateY(2px);
  box-shadow: inset 0 3px 7px var(--wp--preset--color--dark-coral);
}

.wp-block-details summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: bold;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--wp--preset--color--light-blue);
}

.wp-block-details summary:hover {
  text-decoration: underline;
}

.wp-block-details + .wp-block-details {
  margin-block-start: 0;
}

.wp-block-details summary::-webkit-details-marker {
  display: none;
}

.wp-block-details summary::after {
  content: "";
  width: 1rem;
  height: 1rem;
  background-image: url("././assets/icons/arrow.svg");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
}

.wp-block-details[open] summary {
  color: var(--wp--preset--color--coral);
  border-bottom: 1px solid var(--wp--preset--color--coral);
}

.wp-block-details[open] summary::after {
  filter: brightness(0) saturate(100%) invert(52%) sepia(86%) saturate(2901%) hue-rotate(330deg) brightness(101%)
    contrast(101%);
  transform: rotate(90deg);
}

.wp-block-details ul.arrow-list {
  margin-bottom: 1.25rem;
}

.estudiantes::before,
.docentes::before,
.emprendedores::before {
  content: "";
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
  vertical-align: bottom;
  background-size: contain;
  background-repeat: no-repeat;
}

.estudiantes::before {
  background-image: url("././assets/icons/silhouette.svg");
}

.docentes::before {
  background-image: url("././assets/icons/teacher.svg");
}

.emprendedores::before {
  background-image: url("././assets/icons/entrepreneur.svg");
}

.wp-block-navigation__responsive-container.is-menu-open {
  padding: 2rem;
  background-color: var(--wp--preset--color--dark-blue);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container li {
  width: 100%;
  padding: 0;
  margin: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--wp--preset--color--white);
  line-height: 1.2;
  display: block;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-element-button {
  margin-top: 2rem;
  font-size: 1.25rem;
  padding: 1rem 1.5rem;
}

.wp-block-navigation__responsive-container-close svg,
.wp-block-navigation__responsive-container-open svg {
  fill: var(--wp--preset--color--white);
}