/*
Theme Name: Koharu
Author: kfgopro
Author URI: https://profiles.wordpress.org/kfgopro/
Description: Koharu is a quiet, photo-first block theme for photo journals and shoot archives. Each post is shown as a large featured image with a small date and title, side by side on desktop and stacked on mobile. It supports a site logo with tagline, an optional Latin-style date label, and smooth view transitions from the archive to single posts.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: koharu
Tags: photography, blog, portfolio, one-column, wide-blocks, custom-logo, editor-style, full-site-editing, block-patterns, block-styles, translation-ready
*/

/*
  Design tokens (colors, fonts, sizes, spacing) live in theme.json.
  This file only holds layout and decoration that theme.json cannot express.
  The desktop/mobile breakpoint is 782px, the same as WordPress core.
*/

/* ---------- Base ---------- */

/* Desktop archive grid (meta on the left, photo on the right). The single post image width is derived from these too. */
:root {
  --koharu-record-gap: clamp(32px, 4vw, 56px);
  --koharu-record-meta-min: 180px;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--wp--preset--color--line);
}

p {
  text-wrap: pretty;
}

/* Short rule above the date / title */
.koharu-record__meta::before,
.koharu-page-head::before {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  margin-bottom: 22px;
  background: var(--wp--preset--color--line);
}

/* Thin right arrow */
.koharu-record__more::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 26px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 10' fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M0 5h25M20.5 1 25 5l-4.5 4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 10' fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M0 5h25M20.5 1 25 5l-4.5 4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Block style "Latin label" for the Post Date block (English date, small caps-like label). */
.wp-block-post-date.is-style-koharu-latin {
  font-family: var(--wp--preset--font-family--label);
  font-size: var(--wp--preset--font-size--label);
  line-height: 1;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* ---------- Header ---------- */

.koharu-header {
  padding-top: 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--wp--preset--color--line);
}

.koharu-header .wp-block-site-title a {
  text-decoration: none;
}

.koharu-brand {
  gap: 10px;
}

/* When a site logo is set, show it instead of the text site title (the logo's alt text is the site title). */
.koharu-brand:has(.wp-block-site-logo img) .wp-block-site-title {
  display: none;
}

/* With a logo, center the tagline under it. */
.koharu-brand:has(.wp-block-site-logo img) {
  align-items: center;
}

.koharu-brand:has(.wp-block-site-logo img) .wp-block-site-tagline {
  text-align: center;
  /* Letter-spacing is added after the last glyph too; balance it on the left. */
  padding-left: 0.12em;
}

.koharu-header .wp-block-site-logo img {
  width: clamp(160px, 42vw, 230px);
  height: auto;
  /* Let logos with a white background blend into the page background. */
  mix-blend-mode: multiply;
}

.koharu-brand > * {
  margin: 0;
}

.koharu-header .wp-block-site-tagline {
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.12em;
  color: var(--wp--preset--color--muted);
}

.koharu-header .wp-block-navigation-item__content {
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.koharu-header .wp-block-navigation-item__content:hover,
.koharu-header .current-menu-item > .wp-block-navigation-item__content,
.koharu-header [aria-current="page"] {
  color: inherit;
  border-bottom-color: currentColor;
}

.koharu-header .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--wp--preset--color--base);
}

@media (min-width: 782px) {
  .koharu-header {
    padding-top: 40px;
    padding-bottom: 40px;
    border-bottom: 0;
  }

  .koharu-header .wp-block-navigation__container {
    gap: 40px;
  }
}

/* ---------- Main area ---------- */

.koharu-main {
  padding-top: 28px;
  padding-bottom: var(--wp--preset--spacing--60);
}

.koharu-page-head > * {
  margin-block: 0;
}

.koharu-page-head .wp-block-post-date + * {
  margin-top: 16px;
}

/* ---------- Archive ---------- */

.koharu-records__list {
  display: grid;
  gap: clamp(40px, 8vw, 56px);
}

.koharu-records__list > li {
  margin: 0;
}

.koharu-record {
  position: relative;
}

.koharu-record > *,
.koharu-record__meta > * {
  margin-block: 0;
}

.koharu-record__image img,
.koharu-single__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
}

.koharu-record__image img {
  transition: opacity 0.3s;
}

.koharu-record:hover .koharu-record__image img {
  opacity: 0.88;
}

/* Stretch the title link over the whole entry so the entire row is clickable. */
.koharu-record__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.koharu-record__title {
  font-size: var(--wp--preset--font-size--title);
  overflow-wrap: anywhere;
}

/* Show only the arrow; the read-more text stays available to screen readers. */
.koharu-record__more {
  display: inline-flex;
  align-items: center;
  font-size: 0;
  text-decoration: none;
}

/* Mobile: photo, then date and title, with the arrow on the right. */
@media (max-width: 781px) {
  .koharu-record__meta {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 16px;
    align-items: center;
    margin-top: 16px;
  }

  .koharu-record__meta::before {
    display: none;
  }

  .koharu-record__meta .wp-block-post-date {
    grid-column: 1;
  }

  .koharu-record__title {
    grid-column: 1;
    margin-top: 10px;
  }

  .koharu-record__more {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    padding-bottom: 0.5em;
    color: var(--wp--preset--color--muted);
  }
}

/* Desktop: date and title on the left, photo on the right. */
@media (min-width: 782px) {
  .koharu-record {
    display: grid;
    grid-template-columns: minmax(var(--koharu-record-meta-min), 1fr) minmax(0, 3fr);
    column-gap: var(--koharu-record-gap);
    align-items: center;
  }

  .koharu-record__image {
    grid-column: 2;
    grid-row: 1;
  }

  .koharu-record__meta {
    grid-column: 1;
    grid-row: 1;
  }

  .koharu-record__title {
    margin-top: 14px;
  }

  .koharu-record__more {
    margin-top: 22px;
  }
}

/* Pagination */
.koharu-records .wp-block-query-pagination {
  margin-top: var(--wp--preset--spacing--50);
  padding-top: 24px;
  border-top: 1px solid var(--wp--preset--color--line);
}

.koharu-records .wp-block-query-pagination-next {
  margin-left: auto;
}

/* ---------- Single post ---------- */

.koharu-single__image {
  margin-top: var(--wp--preset--spacing--40);
}

/*
  Desktop: make the featured image (and the heading above it) exactly as wide as
  the photo in the archive grid: 3/4 of (wide size - column gap), keeping the
  left column at least 180px. Percentages resolve against the same full-width
  parent as the archive, so both pages compute the same width. Content stays 720px.
*/
@media (min-width: 782px) {
  .koharu-single {
    --koharu-wide: min(var(--wp--style--global--wide-size), 100%);
  }

  .koharu-single .koharu-page-head,
  .koharu-single .koharu-single__image {
    width: min(
      (var(--koharu-wide) - var(--koharu-record-gap)) * 0.75,
      var(--koharu-wide) - var(--koharu-record-gap) - var(--koharu-record-meta-min)
    );
    max-width: none;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

.koharu-single .wp-block-post-content {
  margin-top: var(--wp--preset--spacing--50);
}

.koharu-single .wp-block-gallery.has-nested-images {
  --wp--style--unstable-gallery-gap: 12px;
  gap: 12px;
}

/* Post content: slightly larger than the archive for comfortable reading. */
.koharu-single .wp-block-post-content,
.koharu-page .wp-block-post-content {
  font-size: clamp(13.75px, 3.65vw, 15px);
  line-height: 2.1;
}

/* Text links in content: always underlined; external links also get a small arrow. */
.wp-block-post-content :is(p, li:not(.wp-social-link)) a:not(.wp-element-button):not(:has(img)),
.koharu-textlink {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--wp--preset--color--muted);
  text-underline-offset: 0.3em;
  transition: color 0.2s, text-decoration-color 0.2s;
}

/* .koharu-external is added to links that leave the site (see functions.php); show the arrow for those inside p and li. */
.wp-block-post-content :is(p, li:not(.wp-social-link)) a.koharu-external:not(:has(img))::after {
  content: "";
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  margin-left: 0.3em;
  vertical-align: 0.1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M2 8 8 2M3.5 2H8v4.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M2 8 8 2M3.5 2H8v4.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wp-block-post-content :is(p, li:not(.wp-social-link)) a:not(.wp-element-button):not(:has(img)):hover,
.koharu-textlink:hover {
  color: var(--wp--preset--color--muted);
  text-decoration-color: currentColor;
}

.koharu-postnav {
  margin-top: var(--wp--preset--spacing--60);
  padding-top: 24px;
  border-top: 1px solid var(--wp--preset--color--line);
  font-family: var(--wp--preset--font-family--serif);
  font-size: 15px;
  font-weight: 500;
}

.koharu-postnav .post-navigation-link-previous {
  margin-left: auto;
}

/* ---------- Footer ---------- */

.koharu-footer {
  padding-top: 32px;
  padding-bottom: 40px;
}

.koharu-footer__inner {
  padding-top: 32px;
  border-top: 1px solid var(--wp--preset--color--line);
}

.koharu-copyright {
  gap: 0.6em;
}

.koharu-footer .koharu-copyright > * {
  margin: 0;
  font-family: var(--wp--preset--font-family--serif);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-variant-numeric: lining-nums;
  color: var(--wp--preset--color--muted);
}

/* ---------- View transitions ---------- */

/*
  On same-site navigation, morph the featured image from its archive position to
  the single post position. Images are named in functions.php (koharu-photo-{ID});
  everything else cross-fades.
*/
@view-transition {
  navigation: auto;
}

/* The header is identical on both pages, so keep it still. */
.koharu-header {
  view-transition-name: koharu-header;
}

::view-transition-group(*) {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }

  @view-transition {
    navigation: none;
  }
}