/*
Theme Name: YJO
Theme URI: https://yjo.example/
Author: YJO
Description: YJO WordPress presentation layer.
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: yjo
*/

/* Active WordPress presentation source. Frozen static CSS is retained only as archive reference. */
:root { --yjo-container: min(1240px, calc(100% - 64px)); }
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
.container { width: var(--yjo-container); margin-inline: auto; }
.site-header .menu, .site-header .sub-menu, .footer-links .menu { display: contents; list-style: none; margin: 0; padding: 0; }
.site-header .menu-item, .footer-links .menu-item { display: contents; }
.site-header .menu-item a, .footer-links .menu-item a { color: inherit; text-decoration: none; }
.site-header .nav-actions { display: flex; align-items: center; gap: 12px; }
.site-header .button { white-space: nowrap; }
body.mobile-menu-open { overflow: hidden; }
.hero h1, .section h2, .newsletter h2, .peace h2 { overflow-wrap: anywhere; }
.hero-copy { min-width: 0; }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; }
.peace { background-image: linear-gradient(90deg, rgba(10,47,41,.92), rgba(16,57,47,.52)), var(--peace-image); background-position: center; background-size: cover; }
.product-visual > img { width: 100%; height: 100%; object-fit: cover; }
.product-info p { max-width: 34ch; }
.article-card > img { width: 100%; height: 200px; object-fit: cover; margin-bottom: 21px; }
.footer-links .menu { display: grid; gap: 0; }
.footer-links .menu-item { display: block; }
.footer-links .menu-item a { display: block; margin: 7px 0; }
.site-footer .footer-grid { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(0, 2.3fr); gap: 40px; }
.site-footer .footer-links { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.site-footer .footer-app-entry { display: inline-flex; gap: 7px; color: var(--yjo-text); font-size: 13px; font-weight: 700; }
@media (max-width: 900px) {
  :root { --yjo-container: min(100% - 40px, 680px); }
  .site-footer .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .site-footer .footer-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  :root { --yjo-container: calc(100% - 32px); }
  html, body { width: 100vw !important; max-width: 100vw !important; min-width: 0 !important; }
  .container { width: calc(100% - 32px) !important; max-width: calc(100% - 32px); }
  .site-header .nav-wrap { position: relative; display: flex; width: calc(100% - 32px) !important; max-width: calc(100% - 32px) !important; min-width: 0 !important; min-height: 62px; gap: 10px; }
  .site-header .brand { min-width: 0; flex: 0 1 auto; }
  .site-header .nav-actions { display: flex !important; position: absolute !important; left: 220px; right: auto; top: 9px; width: auto; min-width: 0; height: auto; margin: 0; z-index: 12; gap: 8px; flex: 0 1 auto; }
  .site-header .icon-button { display: none; }
  .site-header .nav-actions .button { position: static; min-width: 0; max-width: 92px; min-height: 44px; padding-inline: 8px; font-size: 10px; overflow: hidden; text-overflow: ellipsis; }
  .site-header .menu-button { position: static; display: grid; place-items: center; width: 36px; height: 44px; padding: 0; }
  .hero h1 { display: block; width: 310px; min-width: 0; max-width: 100%; font-size: clamp(36px, 9vw, 42px); overflow-wrap: anywhere; word-break: break-word; }
  .hero-copy { min-width: 0; padding-top: 55px; }
  .hero-visual { min-height: 390px; }
  .hero-visual img { min-height: 390px; }
  .hero-caption { display: none; }
  .article-card > img { height: 220px; }
}
@media (max-width: 379px) {
  .site-header .nav-actions { left: 205px; }
}
@media (max-width: 360px) {
  .site-header .nav-actions { left: 185px; }
}
@media (max-width: 330px) {
  .site-header .nav-actions { left: 162px; }
  .site-header .nav-actions .button { display: inline-flex; max-width: 82px; min-height: 44px; padding-inline: 6px; font-size: 9px; }
  .site-footer .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}