/*
Theme Name: Ayito
Theme URI: https://raulvalverde.com/
Description: Ayito is a kids-friendly WordPress theme focused on coloring pages, children’s stories, and creative educational content for kids.
Version: 1.0
Author: Raúl Valverde
Author URI: https://raulvalverde.com/
Tags: kids, coloring pages, children stories, education, fun, creative, family, illustrations

  Ayito Theme
  https://raulvalverde.com/

  This theme was designed and built by Raúl Valverde.
  It is intended for websites offering coloring pages, kids stories,
  and other creative content for children.

  The CSS, XHTML and design are released under GPL:
  http://www.opensource.org/licenses/gpl-license.php
*/

:root {
  --bs-body-font-size: 1.1rem;
  --bs-body-line-height: 1.65;
}

html {
  scroll-behavior: smooth;
}

body,
textarea,
input,
option {
  font-family: var(--bs-body-font-family, "Lato", sans-serif);
}

.archive-pagination {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.archive-pagination .nav-links {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.archive-pagination .page-numbers {
  align-items: center;
  background: var(--bs-body-bg);
  border-radius: var(--bs-border-radius);
  border: var(--bs-border-width) solid var(--bs-border-color);
  box-shadow: var(--bs-box-shadow-sm);
  color: var(--bs-body-color);
  display: inline-flex;
  font-size: 1rem;
  font-weight: 600;
  height: 42px;
  justify-content: center;
  line-height: 1;
  min-width: 42px;
  padding: 0 14px;
  text-decoration: none;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.archive-pagination .page-numbers:hover {
  background: var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary);
  color: var(--bs-primary);
}

.archive-pagination .page-numbers.current {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.25);
  color: var(--bs-white);
}

.archive-pagination .page-numbers.prev,
.archive-pagination .page-numbers.next {
  padding: 0 16px;
}

.archive-pagination .dots {
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--bs-secondary-color);
  min-width: auto;
  padding: 0 6px;
}

.archive-pagination .page-numbers:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
  outline: none;
}

.ayito-breadcrumbs {
  font-size: 14px;
  margin-bottom: 1.25rem;
}

.ayito-breadcrumbs .breadcrumb-list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ayito-breadcrumbs .breadcrumb-item {
  align-items: center;
  color: #666;
  display: inline-flex;
}

.ayito-breadcrumbs .breadcrumb-item a {
  color: #aaa;
  text-decoration: none;
}

.ayito-breadcrumbs .breadcrumb-item a:hover {
  text-decoration: underline;
}

.ayito-breadcrumbs .breadcrumb-item.active {
  color: #fff;
  font-weight: 600;
}

.ayito-breadcrumbs .breadcrumb-separator-item {
  align-items: center;
  color: #999;
  display: inline-flex;
}

.breadcrumb-separator {
  display: inline-block;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#page {
  flex: 1;
}

header {
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99;
}

.header {
  height: 70px;
}

body {
  padding-top: 70px;
}

.bg-primary-dark {
  background-color: #0046ad !important;
  transition:
    box-shadow 0.28s ease,
    background-color 0.28s ease;
}

.bg-primary-dark ::selection {
  background: #ffcc00;
  color: #1a1a1a;
}

.bg-primary-dark ::-moz-selection {
  background: #ffcc00;
  color: #1a1a1a;
}

#read-online {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.25rem;
}

#read-online .story p:first-of-type::first-letter {
  float: left;
  font-size: 3.2em;
  font-weight: 700;
  line-height: 0.9;
  margin-right: 8px;
  text-transform: uppercase;
}

.content p:last-of-type {
  margin-bottom: 0 !important;
}

.lh-0 {
  line-height: 0 !important;
}

html {
  scroll-behavior: smooth;
}

.back-to-top {
  align-items: center;
  background: var(--bs-warning);
  border-radius: 50%;
  border: 0;
  bottom: 20px;
  box-shadow: var(--bs-box-shadow);
  color: var(--bs-emphasis-color);
  cursor: pointer;
  display: flex;
  height: 52px;
  justify-content: center;
  opacity: 0;
  position: fixed;
  right: 20px;
  transform: translateY(12px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0.3s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease;
  visibility: hidden;
  width: 52px;
  z-index: 98;
}

.back-to-top.show {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.back-to-top:hover {
  background: #ffaa00;
  transform: translateY(-2px);
}

.back-to-top:focus {
  outline: none;
}

.back-to-top:focus-visible {
  box-shadow:
    0 0 0 0.25rem rgba(var(--bs-warning-rgb), 0.35),
    var(--bs-box-shadow);
}

.back-to-top svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

@media (max-width: 767px) {
  .back-to-top {
    bottom: 14px;
    height: 48px;
    right: 14px;
    width: 48px;
  }

  .back-to-top svg {
    height: 20px;
    width: 20px;
  }
}

.reading-progress {
  background: rgba(var(--bs-white-rgb), 0.14);
  bottom: 0;
  height: 4px;
  left: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  transform-origin: center;
  transform: scaleX(0.96);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  width: 100%;
}

.reading-progress.is-visible {
  opacity: 1;
  transform: scaleX(1);
}

.reading-progress__bar {
  background: linear-gradient(90deg, #6ee7ff 0%, #22d3ee 100%);
  border-radius: 0 999px 999px 0;
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.35);
  height: 100%;
  transition: width 0.12s linear;
  width: 0%;
}

@media screen and (min-width: 575px) {
  .wpx-sm-200 {
    width: 200px !important;
  }

  .w-sm-auto {
    width: auto !important;
  }
}