/*
 * kkbc-layout-1.css - four small layout fixes (findings S4, S6, S7, S9 of the website theme cleanup).
 * Loaded after every other stylesheet of the theme. No older .css or .js file was changed.
 *
 *   S4  Home hero video: the video fills its box at every width (no black band, no left anchoring).
 *   S6  Cookie banner: a gap between the text box and the button box (works left-to-right and right-to-left).
 *   S7  Home hero typing cursor: its height follows the text (em), it sits on the text line, and it blinks.
 *   S9  Blog article: one centred text column of 40em at 18px; title and main image centred with it.
 *
 * A later change of this file gets a new file name (kkbc-layout-2.css), because the CDN keeps a file
 * under its old name. No !important is used in this file.
 */

/* ---- S4: hero video -------------------------------------------------------------------------
   Old rules: style.css:846 sets width:100% only (height auto, so a 16:9 video leaves a band under it);
   responsive.css:37, 106, 715, 1223 set width:auto;height:100vh in a box of 650px or 70vh, which crops
   the video at the left. Same specificity as those rules; this file loads later, so it wins. */
.VideoArea .VideoBox video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* ---- S6: cookie banner ----------------------------------------------------------------------
   kkbc-consent-4.css gives the text box and the button box 50% each with no gap. With a gap, two
   50% boxes would wrap, so each takes 50% minus half the gap. column-gap is direction neutral. */
@media (min-width: 768px) {
  .kkbc-consent {
    column-gap: 28px;
  }
  .kkbc-consent article,
  .kkbc-consent aside {
    width: calc(50% - 14px);
  }
}

/* ---- S7: hero typing cursor -----------------------------------------------------------------
   Old rules: style.css:861 (absolute, 7x140px, bottom 60px, animation name "blink" with no keyframes),
   style.css:865 ("keyframes blink" written without @, animating border-color), responsive.css:38, 142,
   1227 (own px sizes). The pseudo-element only exists after footer.php adds the class Cursor, so this
   selector carries that class; it is more specific than all of the old rules. The cursor now follows the
   last line of the text: inline, 0.75em high for Latin letters, 1em for Japanese, Chinese and Korean. */
@keyframes kkbc-cursor-blink {
  50% {
    opacity: 0;
  }
}
.TypingArea .TypingBox .TypingHead h1 .typingText.Cursor:after {
  position: static;
  display: inline-block;
  width: 0.06em;
  height: 0.75em;
  margin-inline-start: 0.12em;
  vertical-align: baseline;
  background: #51EDB1;
  animation: kkbc-cursor-blink 0.7s step-end infinite;
}
:lang(ja) .TypingArea .TypingBox .TypingHead h1 .typingText.Cursor:after,
:lang(zh) .TypingArea .TypingBox .TypingHead h1 .typingText.Cursor:after,
:lang(ko) .TypingArea .TypingBox .TypingHead h1 .typingText.Cursor:after {
  height: 1em;
  vertical-align: -0.12em;
}

/* ---- S9: blog article -----------------------------------------------------------------------
   Old rules: style.css:113 (.container has max-width:inherit), single.php uses col-sm-9 with no offset.
   The container of the article gets a 1100px limit; head and text are one centred 720px column
   (40em at 18px); the main image may use the whole 1100px. The share icons sit under the title,
   in the same column. Related posts and footer are outside .blog_area and stay as they are. */
.blog_area > .container {
  max-width: 1240px; /* 1100px of content plus the 70px padding on each side */
  margin-left: auto;
  margin-right: auto;
}
.blog_area .blog_head > .row,
.blog_area .blog_body > .row {
  justify-content: center;
}
.blog_area .blog_head > .row > .col-sm-9,
.blog_area .blog_head > .row > .col-sm-3 {
  flex: 0 0 100%;
  max-width: 750px; /* 720px of text plus the 15px column padding on each side, so the head lines up with the text below */
}
.blog_area .blog_head > .row > .col-sm-3 {
  margin-top: 10px;
}
.blog_area .blog_body > .row > .col-sm-9 {
  flex: 0 0 100%;
  max-width: 100%;
}
.blog_area .blog_body .blog_content > :not(figure:first-child),
.blog_area .blog_body .blog_hastag {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.blog_area .blog_body .blog_content figure:first-child {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.blog_area .blog_body .blog_content p,
.blog_area .blog_body .blog_content li {
  font-size: 18px;
  line-height: 1.6;
}
:lang(ja) .blog_area .blog_body .blog_content p,
:lang(ja) .blog_area .blog_body .blog_content li,
:lang(zh) .blog_area .blog_body .blog_content p,
:lang(zh) .blog_area .blog_body .blog_content li,
:lang(ko) .blog_area .blog_body .blog_content p,
:lang(ko) .blog_area .blog_body .blog_content li {
  line-height: 1.8;
}