/*
Theme Name: Kosonavi Theme
Theme URI: https://example.com/
Description: kosonavi theme
Author: Kosonavi
Author URI: https://example.com/
Template: twentytwentythree
Version: 0.0
*/

/*
 Test wireframe
* {
  border: 1px dashed gray;
}

:only-child {
  border: none;
}
*/

/*
 Layout
 */
/* z-index */
header.wp-block-template-part,
footer.wp-block-template-part {
  z-index: 1;
}

/* body flex layout */
body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

body > .wp-site-blocks {
  display: flex;
  flex-direction: column;
  flex: auto;
}

body > .wp-site-blocks > main {
  flex: auto;
}

/* fixed header */
/* header.wp-block-template-part { */ /* not work in WP editor */
body > div.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: 0;
}

/* Invisible Semantic class */
/*
 https://make.wordpress.org/accessibility/handbook/markup/the-css-class-screen-reader-text/#the-css
 */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/*
 Color
 */
header.wp-block-template-part,
footer.wp-block-template-part {
  background-color: lightcyan;
}

/*
 Fonts
 */
body {
  font-family:
    "Shin Maru Go Regular" /* Sakura web font */,
    sans-serif;
}

/* ---------------------
 kosonavi specific style
--------------------- */
/*
 Link
 */
nav.wp-block-kosonavi-tag-list ul>li>a,
nav.kosonavi-nav>ul>li>a:first-child {
  text-decoration: none;
}

nav.wp-block-kosonavi-tag-list ul>li>a:hover,
nav.kosonavi-nav>ul>li>a:first-child:hover {
  text-decoration: underline;
}

/*
 Deco
 */
/* underline */
.kosonavi-deco-underline-pink {
  border-bottom: solid;
  border-bottom-width: 1rem;
  border-image: url("assets/deco/40E3FD6CC84DC95590CDC5CC7808267821D20BCB.png") 0 0 98 round;
}

.kosonavi-deco-underline-pink-disk {
  border-bottom: solid;
  border-bottom-width: 1.2rem;
  border-image: url("assets/deco/line-pink_0.png") 24 round;
}

.kosonavi-deco-underline-blue {
  border-bottom: solid;
  border-bottom-width: 1rem;
  border-image: url("assets/deco/CA1758470A5D5E8208771A0D0FFE5C62530B79CA.png") 0 0 98 round;
}

.kosonavi-deco-underline-blue-disk {
  border-bottom: solid;
  border-bottom-width: 1.2rem;
  border-image: url("assets/deco/line-blue_0.png") 24 round;
}

.kosonavi-deco-underline-green {
  border-bottom: solid;
  border-bottom-width: 1rem;
  border-image: url("assets/deco/E982169B1A6F775E47C3A6B26C494012B84DDFBD.png") 0 0 98 round;
}

.kosonavi-deco-underline-green-disk {
  border-bottom: solid;
  border-bottom-width: 1.2rem;
  border-image: url("assets/deco/line-green_0.png") 24 round;
}

/* himawari */
.kosonavi-deco-himawari {
  display: flex;
}

.kosonavi-deco-himawari::after {
  content: "";
  width: 2em;
  background-image: url("assets/images/CBE333C12E8F532D1E79AB545F6FF5B7CB52E263.png");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 0.3em;
}

/* character */
.kosonavi-deco-chara-all {
  background-image: url("assets/deco/chara-all.png");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: auto 3rem;
}

.kosonavi-deco-chara-hidamari {
  background-image: url("assets/deco/chara-hidamari-w60.png");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: auto 3rem;
}

.kosonavi-deco-chara-linda {
  background-image: url("assets/deco/chara-twohearts-w100.png");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: auto 3rem;
}

.kosonavi-deco-chara-mikan {
  background-image: url("assets/deco/chara-mikan-w100.png");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: auto 3rem;
}

.kosonavi-deco-chara-perl {
  background-image: url("assets/deco/chara-perl-w100.png");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: auto 3rem;
}

.kosonavi-deco-chara-purin {
  background-image: url("assets/deco/chara-pudding-w60.png");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: auto 3rem;
}

/* infoboard */
.kosonavi-deco-infoboard {
  border-style: solid;
  border-image-source: url("assets/deco/011E93E5E4A0104CAAD3445834D38C001A82A30A-edited.png");
  border-image-repeat: round;
  border-image-slice: 60 60 60 96 fill;
  border-width: 1rem 1rem 1rem 3rem;
}

.kosonavi-deco-infoboard>*:not(:last-child) {
  border-bottom: dashed 2px rgb(212 173 111);
}

ul.kosonavi-deco-infoboard {
  padding: 0 0.6rem 0 0.6rem;
}

ul.kosonavi-deco-infoboard>li {
  padding: 1rem 0;
  list-style: none;
}

/*
 Header Part
 */
header.wp-block-template-part {
  border-style: solid;
  border-image-source: url("assets/main-header/BC0E9A59BB9F9709B6857045BB53B1CBA9B92630-edited.png");
  border-image-slice: 38 0 11;
  border-width: 38px 0 11px;
  background-image: url("assets/main-header/BC0E9A59BB9F9709B6857045BB53B1CBA9B92630-bg.png");
}

header.wp-block-template-part .wp-block-site-tagline {
  flex: none;
}

header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open {
  border-style: solid;
  border-image-source: url("assets/main-header/BC0E9A59BB9F9709B6857045BB53B1CBA9B92630-edited.png");
  border-image-slice: 0 0 11;
  border-width: 0 0 11px;
  background-image: url("assets/main-header/BC0E9A59BB9F9709B6857045BB53B1CBA9B92630-bg.png");
  top: 38px;
  bottom: unset;
}

header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  padding-bottom: 1.8rem;
  /* refer .has-global-padding */
  padding-right: var(--wp--style--root--padding-right);
  padding-left: var(--wp--style--root--padding-left);
}


header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open button.wp-block-navigation__responsive-container-close {
  right: var(--wp--style--root--padding-right);
}

/* Breakpoints & Media Queries */
/*
 used the same value as parent theme in
 https://github.com/WordPress/gutenberg/blob/v21.9.0/packages/base-styles/_breakpoints.scss
 */
@media (min-width: 600px) {
  header.wp-block-template-part > .is-layout-constrained > div {
    flex-wrap: wrap;
  }

  header.wp-block-template-part .kosonavi-site-logo {
    flex-direction: column-reverse;
    align-items: start;
  }
}

/*
 Footer Part
 */
footer.wp-block-template-part {
  border-style: solid;
  border-image-source: url("assets/main-header/DA6D8E7454812546BC48B9A9BA26629EA7DC0028_edited.png");
  border-image-slice: 0 0 17;
  border-width: 0 0 1rem;
  background-image: url("assets/main-header/DA6D8E7454812546BC48B9A9BA26629EA7DC0028_bg.png");
  padding: 1rem 0;
}

/*
 Post Block
 */
/* Tag */
nav.wp-block-kosonavi-tag-list ul {
  list-style: none;
  padding: 0;
  display: flex;
  align-items: stretch;
  flex-flow: wrap;
  justify-content: center;
  gap: 0.6em;
}

nav.wp-block-kosonavi-tag-list ul>li {
  display: flex;
  align-items: center;
  height: 1.8em;
  padding: 0.3em 0.6em;
  border-radius: 0.6em;
}

/* Breakpoints & Media Queries */
/*
 used the same value as parent theme in
 https://github.com/WordPress/gutenberg/blob/v21.9.0/packages/base-styles/_breakpoints.scss
 */
@media (min-width: 600px) {
  nav.wp-block-kosonavi-tag-list ul {
    justify-content: start;
  }
}

nav.wp-block-kosonavi-tag-list ul>li.kosonavi-tag-group-子ども:nth-of-type(3n+1),
nav.wp-block-kosonavi-tag-list ul>li.kosonavi-tag-group-place:nth-of-type(3n+1) {
  background-color: #d6eaff;
}

nav.wp-block-kosonavi-tag-list ul>li.kosonavi-tag-group-子ども:nth-of-type(3n+2),
nav.wp-block-kosonavi-tag-list ul>li.kosonavi-tag-group-place:nth-of-type(3n+2) {
  background-color: #dbffed;
}

nav.wp-block-kosonavi-tag-list ul>li.kosonavi-tag-group-子ども:nth-of-type(3n),
nav.wp-block-kosonavi-tag-list ul>li.kosonavi-tag-group-place:nth-of-type(3n) {
  background-color: #efe0ff;
}

nav.wp-block-kosonavi-tag-list ul>li.kosonavi-tag-group-相談先:nth-of-type(3n+1),
nav.wp-block-kosonavi-tag-list ul>li.kosonavi-tag-group-support:nth-of-type(3n+1) {
  background-color: #ffffb7;
}

nav.wp-block-kosonavi-tag-list ul>li.kosonavi-tag-group-相談先:nth-of-type(3n+2),
nav.wp-block-kosonavi-tag-list ul>li.kosonavi-tag-group-support:nth-of-type(3n+2) {
  background-color: #ffd6ea;
}

nav.wp-block-kosonavi-tag-list ul>li.kosonavi-tag-group-相談先:nth-of-type(3n),
nav.wp-block-kosonavi-tag-list ul>li.kosonavi-tag-group-support:nth-of-type(3n) {
  background-color: #ffdbb7;
}

nav.wp-block-kosonavi-tag-list ul>li.kosonavi-tag-group-ungrouped {
  background-color: lightgray;
}

/* Interview */
dl.kosonavi-post-interview>dt,
dl.kosonavi-block-interview>dt {
  display: flex;
}

dl.kosonavi-post-interview>dt::before,
dl.kosonavi-block-interview>dt::before {
  content: url("assets/images/0D8742A2E3514E5872AADEF5EB9774A9079F6D59.png");
  align-self: center;
}

dl.kosonavi-post-interview>dd,
dl.kosonavi-block-interview>dd {
  margin: auto;
  padding: 0 1em;
  border: pink solid 0.2em;
  border-radius: 0.5em;
}

.chat-bubble {
  position: relative;
  padding: 0.8em 1em;
  margin: 1.8em;
  border-radius: 0.5em;
}

.chat-bubble::after {
  content: "";
  position: absolute;
  bottom: 0.4em;
  width: 0;
  height: 0;
  border: 0.6em solid transparent;
}

.chat-bubble.left {
  background-color: pink;
}
.chat-bubble.left::after {
  left: -1.6em;
  border-width: 0.6em 1.8em 0.6em 0;
  border-right-color: pink;
}

.chat-bubble.right {
  background-color: #c0ffc0;
}
.chat-bubble.right::after {
  right: -1.6em;
  border-width: 0.6em 0 0.6em 1.8em;
  border-left-color: #c0ffc0;
}

/* Address */
dl.kosonavi-post-address>dt, /* TODO: remove this line */
dl.kosonavi-block-address>dt {
  text-align: center;
  padding: 0.8em 1em;
  background-color: lavender;
}

dl.kosonavi-post-address>dd, /* TODO: remove this line */
dl.kosonavi-block-address>dd {
  text-align: center;
  margin: 0 auto 0.4em;
  padding: 0.8em 1em;
  background-color:aliceblue;
}