/*
Theme Name:   Andika pickup
Theme URI:    http://example.com/twenty-fifteen-child/
Description:  Twenty Fifteen Child Theme
Author:       John Doe
Author URI:   http://example.com
Template:     twentytwentythree
Version:      1.0.1
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:  andikapickup
*/

/* global styling */
.has-global-padding {
  padding-right: 12px;
  padding-left: 12px;
}

header {
  padding: 24px 0 0 0;
}

.wp-site-blocks {
  padding: 0 0 40px;
}

/* block latest post content */
.kp-yt-iframe {
  float: none;
  clear: both;
  width: 100%;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

.kp-yt-iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

ul.wp-block-latest-posts {
  max-width: 100%;
}

ul.wp-block-latest-posts li {
  position: relative;
}

ul.is-flex-container.columns-3 li.category-video {
  width: 100% !important;
}

ul.is-flex-container.columns-3 h2,
ul.wp-block-latest-posts a {
  font-size: var(--wp--preset--font-size--medium);
  text-transform: capitalize;
  font-weight: 500;
  margin: 0 0 8px;
}

ul.wp-block-latest-posts a {
  font-size: 10px;
  margin: 0;
  display: inline-block;
  width: 100%;
  text-align: center;
  position: absolute;
  padding: 0 10%;
  box-sizing: border-box;
}

ul.is-flex-container.columns-3 figure.wp-block-image,
ul.is-flex-container.columns-3 figure.wp-block-embed.is-type-video,
ul.wp-block-latest-posts figure.wp-block-image,
ul.wp-block-latest-posts figure.wp-block-embed.is-type-video {
  width: 100%;
  position: relative;
  width: 100%;
}

ul.is-flex-container.columns-3 figure.wp-block-image {
  background: rgba(0, 0, 0, 0.6);
}

ul.is-flex-container.columns-3 figure.wp-block-image + p {
  margin-top: 12px;
}

ul.is-flex-container.columns-3 figure.wp-block-embed.is-type-video iframe,
ul.wp-block-latest-posts figure.wp-block-embed.is-type-video iframe {
  width: 100%;
}

ul.is-flex-container.columns-3 figure.wp-block-image img,
ul.wp-block-latest-posts figure.wp-block-image img {
  display: block;
  margin: auto;
}

ul.is-flex-container.columns-3 figure.wp-block-image .wp-element-caption,
ul.wp-block-latest-posts figure.wp-block-image .wp-element-caption {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 8px;
  box-sizing: border-box;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.2rem;
}

ul.wp-block-latest-posts
  figure.wp-block-embed.is-type-video
  .wp-element-caption {
  display: none;
}

@media (min-width: 600px) {
  ul.is-flex-container.columns-3 li {
    width: calc(50% - 0.8rem) !important;
  }

  ul.wp-block-latest-posts {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    max-width: 768px;
  }

  ul.wp-block-latest-posts li {
    flex-shrink: 0;
  }

  ul.wp-block-latest-posts .wp-block-latest-posts__post-full-content > *,
  ul.wp-block-latest-posts figure.wp-block-image {
    width: 300px;
  }

  ul.wp-block-latest-posts figure.wp-block-embed.is-type-video {
    width: calc(300px / 56.25 * 100);
  }
}

/* image-fill for header, look like background fill */
figure.wp-block-image.size-large.image-fill {
  position: relative;
  height: 154px;
  overflow: hidden;
}

figure.wp-block-image.size-large.image-fill img {
  position: absolute;
  width: var(--wp--style--global--content-size);
  left: 50%;
  transform: translateX(-50%);
  max-width: var(--wp--style--global--content-size);
}

figure.wp-block-image.size-large.image-fill .wp-element-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--wp--preset--font-size--xx-large);
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
  border-radius: 4px;
  margin: 0;
  width: auto;
  white-space: nowrap;
}

/* wa button */
.wa-button a {
  display: inline-block;
  background-image: url("./wa.png");
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: 4px center;
  border: solid 2px #128c7e;
  border-radius: 24px;
  padding: 2px 8px 2px 32px;
  color: #128c7e;
  text-decoration: none;
  font-weight: 500;
}