/*
Theme Name: Aishien Hibino
Theme URI: https://hibino-shiawase.info/
Author: 株式会社アイ支援センター
Description: 就労継続支援サイト専用の軽量テーマ。
Version: 0.3.13
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: aishien-hibino
*/

:root {
  --aishien-ink: #20334d;
  --aishien-green: #20334d;
  --aishien-mint: #edf1f6;
  --aishien-paper: #ffffff;
  --aishien-accent: #ef9c38;
  --aishien-width: 1120px;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--aishien-ink); background: var(--aishien-paper); font-family: system-ui, -apple-system, "Noto Sans JP", sans-serif; line-height: 1.75; }
a { color: var(--aishien-green); }
.site-shell { width: min(calc(100% - 2rem), var(--aishien-width)); margin-inline: auto; }
.site-header { padding: 1rem 0; border-bottom: 1px solid #20334d; background: #20334d; color: #fff; }
.site-header a { color: #fff; }
.site-header__inner { display: flex; gap: 1.5rem; align-items: center; justify-content: space-between; }
.site-brand { display: flex; gap: .75rem; align-items: center; }
.custom-logo { width: auto; max-height: 48px; }
.site-title { color: var(--aishien-ink); font-weight: 800; text-decoration: none; }
.site-header ul { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.site-header a { text-underline-offset: .25em; }
.hero { padding: clamp(3rem, 8vw, 7rem) 0; background: linear-gradient(135deg, var(--aishien-mint), #fff7e8); }
.hero h1 { max-width: 16ch; margin: 0 0 1rem; font-size: clamp(2rem, 5vw, 4rem); line-height: 1.2; }
.hero p { max-width: 44rem; font-size: 1.1rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.section { padding: 3.5rem 0; }
.section--soft { background: #f3f5f8; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.card { padding: 1.25rem; border: 1px solid #d6dce5; border-radius: 1rem; background: #fff; }
.card--link { color: inherit; text-decoration: none; }
.card--link:hover, .card--link:focus-visible { border-color: var(--aishien-green); box-shadow: 0 0 0 3px rgba(32,51,77,.15); }
.card h3 { margin-top: 0; }
.meta { color: #526174; font-size: .9rem; }
.button { display: inline-block; padding: .75rem 1.1rem; border: 2px solid var(--aishien-green); border-radius: 999px; color: #fff; background: var(--aishien-green); font-weight: 600; text-decoration: none; }
.button--secondary { color: var(--aishien-green); background: #fff; }
.button:hover, .button:focus-visible { box-shadow: 0 0 0 4px rgba(32,51,77,.2); }
.disclosure { display: flex; gap: 1.5rem; align-items: center; justify-content: space-between; padding: 1.5rem; border-radius: 1rem; background: #fff3df; }
.content { max-width: 760px; }
.entry-header { margin-bottom: 2rem; }
.entry-content img { max-width: 100%; height: auto; }
.aishien-simple-post label { display: block; margin-bottom: .35rem; font-weight: 800; }
.aishien-simple-post input[type="text"], .aishien-simple-post textarea, .aishien-simple-post input[type="file"] { width: 100%; max-width: 44rem; padding: .75rem; border: 1px solid #8291a5; border-radius: .5rem; background: #fff; font: inherit; }
.aishien-simple-post button { padding: .8rem 1.2rem; border: 0; border-radius: .65rem; color: #fff; background: var(--aishien-green); font: inherit; font-weight: 800; }
.site-footer { padding: 2rem 0; color: #fff; background: var(--aishien-ink); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.screen-reader-text:focus { position: fixed; z-index: 9999; top: 1rem; left: 1rem; width: auto; height: auto; padding: .75rem; clip: auto; background: #fff; }

.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero__background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero:has(.hero__background)::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(255,255,255,.94),rgba(255,255,255,.86) 28%,rgba(255,255,255,.30) 50%,rgba(255,255,255,.06) 72%,rgba(255,255,255,.02)); z-index: -1; }
.hero__heading { white-space: pre-line; }
.blog-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2rem 1.5rem; }
.quick-links { display: grid; grid-template-columns: repeat(5,1fr); gap: 1rem; text-align: center; }
.quick-links a { text-decoration: none; font-weight: 600; font-size: .9rem; }
.quick-links img { display: block; width: 82px; height: 82px; padding: 17px; margin: 0 auto .75rem; border-radius: 25px; background: #e9eef5; }
.work-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.5rem; }
.work-link { color: inherit; text-decoration: none; }
.work-photo,.work-placeholder { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 1.25rem; }
.work-placeholder { background: #edf1f6; display: grid; place-items: center; }
.work-placeholder img { width: 80px; }
.notice { padding: 1rem; background: #edf1f6; border-left: 3px solid #20334d; border-radius: 1rem; }
.public-results { overflow-x: auto; }
.legacy-metric { margin-block: 2rem; min-width: 0; }
.legacy-metric h3 { margin-bottom: .75rem; }
.metrics-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; }
.metric-panel { background:white; padding:1.5rem; border-radius:1.25rem; min-width:0; }
.metric-panel.sales,.metric-panel.work { grid-column:1/-1; }
.metric-scroll,.metric-panel details { overflow-x:auto; }
.metric-scroll svg { width:100%; min-width:600px; display:block; }
.metric-legend { display:inline-block; padding-left:.4rem; margin:.3rem .7rem .3rem 0; font-size:.8rem; }
.metric-panel td,.metric-panel th { padding:.5rem; white-space:nowrap; text-align:right; }
.post-card a { display: block; color: inherit; text-decoration: none; }
.post-card h3 { font-size: 1.1rem; margin: .4rem 0; }
.post-card a:hover h3 { text-decoration: underline; }
.post-card img, .post-placeholder { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 1.25rem; height: auto; }
.post-placeholder { display: grid; place-items: center; background: #edf1f6; }
.post-card time { display: block; margin-top: .75rem; }
.more { text-align: center; margin-top: 2rem; }
.site-footer a { color: #fff; }
.site-header .button--secondary { color: #20334d; }
:focus-visible { outline: 3px solid #e2a63d; outline-offset: 4px; }
.custom-logo { max-width: 220px; max-height: 72px; width: auto; height: auto; object-fit: contain; }
@media (max-width: 700px) {
	.hero:has(.hero__background)::before { background: linear-gradient(90deg,rgba(255,255,255,.90),rgba(255,255,255,.80) 65%,rgba(255,255,255,.55)); }
	.metrics-grid { grid-template-columns:1fr; }
	.quick-links { grid-template-columns: repeat(3,1fr); }
	.work-grid { grid-template-columns: 1fr; }
	.blog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem .8rem; }
	.post-card h3 { font-size: .95rem; }
	.site-header__inner { align-items: flex-start; flex-direction: column; }
	.disclosure { align-items: flex-start; flex-direction: column; }
}



/* Keep the brand and account entry compact at phone widths. */
@media (max-width: 700px) {
  .site-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-content: initial;
    gap: .5rem;
  }
  .site-header .site-header__inner .site-brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    gap: .4rem;
    padding: .25rem;
  }
  .site-brand .custom-logo { max-width: min(29vw, 112px); max-height: 48px; }
  .site-title { min-width: 0; font-size: .78rem; line-height: 1.3; overflow-wrap: anywhere; }
  .site-header nav { grid-column: 1 / -1; grid-row: 2; }
  .site-header nav:empty { display: none; }
  .site-header .button--secondary {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    width: auto;
    white-space: nowrap;
    padding: .45rem .65rem;
  }
}

/* Published front-page content remains readable while sections move into the new design. */
.legacy-front-content { overflow-x: auto; }
.legacy-front-content img, .legacy-front-content iframe { max-width: 100%; }
.legacy-front-content img { height: auto; }
.legacy-front-content h2 { margin-top: 2.5rem; }

/* Reuse the existing production footer information without changing widget settings. */
.legacy-footer-widgets { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); gap: 1.25rem; margin-bottom: 2rem; }
.legacy-footer-widget { min-width: 0; overflow-wrap: anywhere; }
.legacy-footer-widget h2 { margin: 0 0 .5rem; font-size: 1rem; }
.legacy-footer-widget p { margin: .25rem 0; }

/* Multi-series M Chart canvases stay inside the phone width. Scrolling is limited to the chart. */
@media (max-width: 700px) {
	.m-chart-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
	.m-chart-scroll > .m-chart-container { width: 1120px; max-width: none; }
	.m-chart-scroll > .m-chart-container > canvas.m-chart { height: 640px !important; max-width: none !important; }
	.m-chart-scroll .m-chart-container .screen-reader-text:has(.m-chart-table) { position: static; width: auto; height: auto; margin: 1rem 0 0; overflow: visible; clip-path: none; white-space: normal; }
	.m-chart-scroll .m-chart-table { border-collapse: collapse; font-size: .85rem; }
	.m-chart-scroll .m-chart-table th, .m-chart-scroll .m-chart-table td { padding: .35rem .6rem; white-space: nowrap; text-align: right; }
}

/* Fiscal year choice for the published sales graphs. */
.sales-year-switch { max-width:100%; }
.sales-year-switch > input { position:absolute; width:1px; height:1px; opacity:0; }
.sales-year-switch__tabs { display:flex; gap:.5rem; flex-wrap:wrap; margin:1rem 0; }
.sales-year-switch__tabs label { cursor:pointer; border:2px solid #286ba9; border-radius:.5rem; padding:.55rem 1rem; color:#17466e; background:#fff; font-weight:700; }
.sales-year-switch > #aishien-sales-2025:checked ~ .sales-year-switch__tabs label[for="aishien-sales-2025"],
.sales-year-switch > #aishien-sales-2026:checked ~ .sales-year-switch__tabs label[for="aishien-sales-2026"] { color:#fff; background:#286ba9; }
.sales-year-switch > input:focus-visible ~ .sales-year-switch__tabs label { outline:3px solid #e2a63d; outline-offset:3px; }
.sales-year-switch__panel--2026 { display:none; }
.sales-year-switch > #aishien-sales-2026:checked ~ .sales-year-switch__panels .sales-year-switch__panel--2025 { display:none; }
.sales-year-switch > #aishien-sales-2026:checked ~ .sales-year-switch__panels .sales-year-switch__panel--2026 { display:block; }
.sales-year-switch .aishien-public-sales-chart { max-width:100%; overflow-x:auto; }
.sales-year-switch .aishien-public-sales table { width:100%; }