/*
Theme Name: Aptly
Theme URI: https://example.com/
Description: Aptly theme extends Twenty Twenty-Five theme which emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Author: Aptly
Version: 0.1.0
Template: twentytwentyfive
Text Domain: aptly-child
*/

/*
 * IMPORTANT: Replace "twentytwentyfive" above with the parent theme's directory
 * name before activating this theme. Do not use the display name; use the
 * directory name found under wp-content/themes/.
 */

.about-horizontal-pattern-container {
  height: 115px;
}

.about-horizontal-pattern {
  position: absolute !important;
  left: 0;
  margin-top: -20px !important;
}

.team-pattern-container {
  position: relative;
  overflow-y: visible;
  overflow-x: hidden;
}

.participating-teams-pattern-container {
  width: 200px;
  height: 200px;
  background: red;
  position: absolute;
  top: 0;
  left: 0;
}

.hero .wp-block-splide-carousel {
  margin-bottom: 0 !important;
}

/* Mobile styles */
@media (width < 64rem) {
  .about-mobile-cta {
    display: flex;
  }

  .about-desktop-cta {
    display: none !important;
  }

  .teams-desktop-tablet-carousel {
    display: none !important;
  }
}

/* Table to Desktop styles */
@media (width >= 64rem) {
  .hero-content-section {
    margin-left: -50px !important;
  }

  .about-mobile-cta {
    display: none !important;
  }

  .about-desktop-cta {
    display: flex;
  }

  .about-horizontal-pattern {
    display: none;
  }

  .about-horizontal-pattern-container {
    display: none;
  }

  .teams-mobile-carousel {
    display: none !important;
  }
}

.splide__pagination__page.is-active {
  background: #eba748 !important;
}

.participating-teams-section .splide__pagination__page.is-active {
  background: #0092aa !important;
}

.venue-container img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.post-list-page {
  margin-top: 0;
  padding: 0;
}

.post-list-page .wp-block-post-title {
  /*  */
}

.post-list-page .wp-block-post-content {
  margin-top: 0;
}

.post-list-page .aptly-page-content {
  padding-left: 0;
  padding-right: 0;
  margin: 0;
}

.post-list-page .aptly-page-content > div {
  padding: 0;
  margin: 0;
}

.wp-block-template-part {
  margin-top: 0;
}

/*
 * Navigation block custom classes are copied to the list inside its overlay.
 * Reset the desktop sizing utilities there so the mobile menu stays vertical.
 */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation__container {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  height: auto !important;
  overflow-y: visible !important;
}

/* Keep Tailwind positioning utilities visible in Gutenberg's editor iframe. */
.editor-styles-wrapper .absolute {
  position: absolute !important;
}

.editor-styles-wrapper .top-0 {
  top: 0 !important;
}

.editor-styles-wrapper .z-10 {
  z-index: 10 !important;
}

/*
 * Gutenberg positions blocks relative to its constrained editor wrapper.
 * Let the horizontal pattern span the editor canvas like it does on the site.
 */
.editor-styles-wrapper .about-horizontal-pattern {
  left: 50% !important;
  width: 100vw !important;
  max-width: none !important;
  transform: translateX(-50%);
}