/*
 * Search Site Base - core styles
 * デザイントークンは CSS変数で公開. 子テーマは :root を上書きしてテーマカラーを差替.
 */

:root {
    /* color */
    --ssb-color-bg: #ffffff;
    --ssb-color-text: #1a1a1a;
    --ssb-color-muted: #6b7280;
    --ssb-color-accent: #2856a3;
    --ssb-color-border: #e5e7eb;

    /* type */
    --ssb-font-base: 'Source Han Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
    --ssb-font-heading: var(--ssb-font-base);
    --ssb-fs-base: 1rem;
    --ssb-lh-base: 1.7;

    /* spacing */
    --ssb-space-xs: .25rem;
    --ssb-space-sm: .5rem;
    --ssb-space-md: 1rem;
    --ssb-space-lg: 2rem;
    --ssb-space-xl: 3rem;

    /* layout */
    --ssb-content-max: 1140px;
}

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--ssb-color-bg);
    color: var(--ssb-color-text);
    font-family: var(--ssb-font-base);
    font-size: var(--ssb-fs-base);
    line-height: var(--ssb-lh-base);
}

a { color: var(--ssb-color-accent); }
a:focus-visible { outline: 2px solid var(--ssb-color-accent); outline-offset: 2px; }

img { max-width: 100%; height: auto; display: block; }

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px; width: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    position: absolute !important; word-wrap: normal !important;
}
.skip-link:focus {
    background: #fff; color: var(--ssb-color-text);
    padding: var(--ssb-space-sm) var(--ssb-space-md);
    position: absolute; left: var(--ssb-space-md); top: var(--ssb-space-md);
    z-index: 100000; clip: auto; clip-path: none; width: auto; height: auto;
}

.site-header,
.site-footer,
#page {
    width: 100%;
}
.site-header__inner,
.site-footer__inner,
.site-main {
    max-width: var(--ssb-content-max);
    margin-inline: auto;
    padding-inline: var(--ssb-space-md);
}

.site-header { border-block-end: 1px solid var(--ssb-color-border); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--ssb-space-md); padding-block: var(--ssb-space-md); }
.site-header__aside { display: flex; align-items: center; gap: var(--ssb-space-sm); margin-inline-start: auto; }
.ssct-lang-switcher,
.ssb-lang-switcher { list-style: none; display: flex; gap: var(--ssb-space-xs); padding: 0; margin: 0; font-size: .875rem; }
.ssct-lang-switcher__item a,
.ssct-lang-switcher__item span,
.ssb-lang-switcher__item a,
.ssb-lang-switcher__item span { color: inherit; text-decoration: none; padding: .25rem .5rem; border-radius: 3px; }
.ssct-lang-switcher__item.is-current span,
.ssb-lang-switcher__item.is-current span { font-weight: 700; background: var(--ssb-color-subtle, #e5e7eb); }
.ssct-lang-switcher__item a:hover,
.ssb-lang-switcher__item a:hover { background: var(--ssb-color-subtle, #f3f4f6); }
.ssct-lang-switcher__item.is-missing span { color: var(--ssb-color-muted); cursor: not-allowed; }
.site-title { margin: 0; font-size: 1.25rem; font-weight: 700; }
.site-title a { color: inherit; text-decoration: none; }
.site-description { margin: 0; color: var(--ssb-color-muted); font-size: .875rem; }

.site-footer { border-block-start: 1px solid var(--ssb-color-border); margin-block-start: var(--ssb-space-xl); }
.site-footer__inner { padding-block: var(--ssb-space-lg); }

.site-main { padding-block: var(--ssb-space-lg); }
.page-header { margin-block-end: var(--ssb-space-lg); }
.page-title { margin: 0 0 var(--ssb-space-sm); }

/* SSC integration layout */
.ssc-archive,
.ssc-search {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--ssb-space-lg);
}
@media (max-width: 768px) {
    .ssc-archive,
    .ssc-search { grid-template-columns: 1fr; }
}

.ssc-search-form { display: flex; flex-direction: column; gap: var(--ssb-space-md); }
.ssc-search-form__filter { display: flex; flex-direction: column; gap: var(--ssb-space-xs); }
.ssc-search-form__label { font-weight: 600; }
.ssc-search-form__submit {
    background: var(--ssb-color-accent); color: #fff; border: 0;
    padding: var(--ssb-space-sm) var(--ssb-space-md);
    cursor: pointer; border-radius: 4px;
}

.ssc-results__list {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: var(--ssb-space-md);
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.ssc-card { border: 1px solid var(--ssb-color-border); border-radius: 6px; overflow: hidden; background: #fff; }
.ssc-card__media { display: block; }
.ssc-card__body { padding: var(--ssb-space-md); }
.ssc-card__title { margin: 0 0 var(--ssb-space-xs); font-size: 1rem; }
.ssc-card__title a { color: inherit; text-decoration: none; }
.ssc-card__excerpt { margin: 0; color: var(--ssb-color-muted); font-size: .875rem; }

.ssc-pagination__list { display: flex; gap: var(--ssb-space-xs); list-style: none; padding: 0; margin: var(--ssb-space-lg) 0 0; }
.ssc-pagination__item .page-numbers,
.ssc-pagination__item a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.25rem; height: 2.25rem; padding: 0 var(--ssb-space-sm);
    border: 1px solid var(--ssb-color-border); border-radius: 4px;
    text-decoration: none;
}
.ssc-pagination__item .current { background: var(--ssb-color-accent); color: #fff; }

/* ============================================================
 * Phase 2: template-parts (semantic layout only).
 * 色 / font / shadow 等の visual treatment は子テーマで上書きする想定.
 * ============================================================ */

/* hero */
.ssb-hero { display: flex; flex-direction: column; gap: var(--ssb-space-md); margin-block-end: var(--ssb-space-lg); }
.ssb-hero__title { margin: 0; font-family: var(--ssb-font-heading); font-size: 1.875rem; line-height: 1.3; }
.ssb-hero__thumbnail { margin: 0; }
.ssb-hero__thumbnail img { width: 100%; height: auto; border-radius: 6px; }
.ssb-hero__tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--ssb-space-xs); font-size: .875rem; }
.ssb-hero__tag { display: inline-flex; align-items: center; padding: var(--ssb-space-xs) var(--ssb-space-sm); border: 1px solid var(--ssb-color-border); border-radius: 999px; }
.ssb-hero__tag a { color: inherit; text-decoration: none; }

/* spec-table */
.ssb-spec { width: 100%; border-collapse: collapse; margin-block: var(--ssb-space-md); }
.ssb-spec__row { border-block-end: 1px solid var(--ssb-color-border); }
.ssb-spec__label { text-align: start; padding: var(--ssb-space-sm) var(--ssb-space-md); width: 30%; vertical-align: top; color: var(--ssb-color-muted); font-weight: 600; background: var(--ssb-color-subtle, #fafafa); }
.ssb-spec__value { padding: var(--ssb-space-sm) var(--ssb-space-md); }
@media (max-width: 600px) {
    .ssb-spec__row { display: block; }
    .ssb-spec__label, .ssb-spec__value { display: block; width: auto; }
}

/* card grid (used by archive.php non-SSC path) */
.ssb-card-grid {
    display: grid;
    gap: var(--ssb-space-md);
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* card */
.ssb-card { border: 1px solid var(--ssb-color-border); border-radius: 6px; overflow: hidden; background: #fff; transition: transform .15s ease; }
.ssb-card:hover { transform: translateY(-2px); }
.ssb-card__link { display: flex; flex-direction: column; gap: var(--ssb-space-sm); color: inherit; text-decoration: none; }
.ssb-card__thumbnail { margin: 0; }
.ssb-card__thumbnail img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ssb-card__body { padding: var(--ssb-space-md); display: flex; flex-direction: column; gap: var(--ssb-space-xs); }
.ssb-card__title { margin: 0; font-size: 1rem; line-height: 1.4; }
.ssb-card__tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--ssb-space-xs); font-size: .75rem; color: var(--ssb-color-muted); }
.ssb-card__excerpt { margin: 0; color: var(--ssb-color-muted); font-size: .875rem; }

/* breadcrumb */
.ssb-breadcrumb { font-size: .8125rem; margin-block-end: var(--ssb-space-md); color: var(--ssb-color-muted); }
.ssb-breadcrumb__list { display: flex; flex-wrap: wrap; gap: var(--ssb-space-xs); list-style: none; padding: 0; margin: 0; }
.ssb-breadcrumb__item { display: inline-flex; align-items: center; }
.ssb-breadcrumb__item + .ssb-breadcrumb__item::before { content: '›'; margin-inline: var(--ssb-space-xs); color: var(--ssb-color-muted); }
.ssb-breadcrumb__item a { color: inherit; }
.ssb-breadcrumb__item [aria-current="page"] { color: var(--ssb-color-text); }

/* pagination (汎用 fallback. SSC pagination 使用時は .ssc-pagination の css が当たる) */
.ssb-pagination { margin-block-start: var(--ssb-space-lg); }
.ssb-pagination__list { display: flex; flex-wrap: wrap; gap: var(--ssb-space-xs); list-style: none; padding: 0; margin: 0; }
.ssb-pagination__item .page-numbers,
.ssb-pagination__item a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.25rem; height: 2.25rem; padding: 0 var(--ssb-space-sm);
    border: 1px solid var(--ssb-color-border); border-radius: 4px;
    text-decoration: none; color: inherit;
}
.ssb-pagination__item .current { background: var(--ssb-color-accent); color: #fff; border-color: var(--ssb-color-accent); }

/* ============================================================
 * Phase 6: front-page sections
 * ============================================================ */
.ssb-section { margin-block-end: var(--ssb-space-xl); }
.ssb-section__header {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--ssb-space-md); margin-block-end: var(--ssb-space-md);
    border-block-end: 1px solid var(--ssb-color-border); padding-block-end: var(--ssb-space-sm);
}
.ssb-section__title { margin: 0; font-size: 1.5rem; font-family: var(--ssb-font-heading); }
.ssb-section__more { margin: 0; font-size: .875rem; }
.ssb-section__more a { color: var(--ssb-color-accent); text-decoration: none; }

.ssb-section-hero {
    position: relative;
    overflow: hidden;
    min-height: 480px;
    display: flex; align-items: center; justify-content: center;
    background-color: var(--ssb-color-subtle, #f3f4f6);
    background-size: cover; background-position: center;
    color: var(--ssb-color-text);
    margin-block-end: var(--ssb-space-xl);
    padding: var(--ssb-space-xl) var(--ssb-space-md);
    text-align: center;
}
.ssb-section-hero--has-image::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: rgba(255, 255, 255, .55);
}

/* slider */
.ssb-section-hero__slides { position: absolute; inset: 0; z-index: 0; }
.ssb-section-hero__slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0;
    animation: ssb-hero-fade var(--ssb-hero-cycle, 18s) infinite;
}
.ssb-section-hero--slides-2 .ssb-section-hero__slide { animation-duration: 12s; }
.ssb-section-hero--slides-2 .ssb-section-hero__slide--1 { animation-delay: 0s; }
.ssb-section-hero--slides-2 .ssb-section-hero__slide--2 { animation-delay: 6s; }
.ssb-section-hero--slides-3 .ssb-section-hero__slide { animation-duration: 18s; }
.ssb-section-hero--slides-3 .ssb-section-hero__slide--1 { animation-delay: 0s; }
.ssb-section-hero--slides-3 .ssb-section-hero__slide--2 { animation-delay: 6s; }
.ssb-section-hero--slides-3 .ssb-section-hero__slide--3 { animation-delay: 12s; }
@keyframes ssb-hero-fade {
    0%, 28%, 100% { opacity: 0; }
    5%, 23% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .ssb-section-hero__slide { animation: none; }
    .ssb-section-hero__slide--1 { opacity: 1; }
}

.ssb-section-hero__inner { position: relative; z-index: 2; max-width: 720px; }
.ssb-section-hero__title { margin: 0 0 var(--ssb-space-sm); font-size: 2rem; line-height: 1.3; }
.ssb-section-hero__subtitle { margin: 0 0 var(--ssb-space-md); font-size: 1.125rem; color: var(--ssb-color-muted); }
.ssb-section-hero__cta { margin: 0; }
.ssb-section-hero__cta-link {
    display: inline-block; padding: var(--ssb-space-sm) var(--ssb-space-lg);
    background: var(--ssb-color-accent); color: #fff; text-decoration: none;
    border-radius: 4px; font-weight: 600;
}

.ssb-card-grid--featured {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* ranking */
.ssb-ranking-list {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: var(--ssb-space-md);
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.ssb-ranking-list__item { position: relative; }
.ssb-ranking-list__rank {
    position: absolute; z-index: 2;
    top: var(--ssb-space-sm); left: var(--ssb-space-sm);
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.25rem; height: 2.25rem; padding: 0 var(--ssb-space-xs);
    border-radius: 999px; background: var(--ssb-color-accent); color: #fff;
    font-weight: 700; font-size: .875rem;
}
.ssb-ranking-list__rank--1 { background: #d4af37; }
.ssb-ranking-list__rank--2 { background: #aaa; }
.ssb-ranking-list__rank--3 { background: #cd7f32; }

/* japan-map (region grouped fallback) */
.ssb-japan-map {
    display: grid; gap: var(--ssb-space-lg);
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.ssb-japan-map__region-title {
    margin: 0 0 var(--ssb-space-sm); padding-block-end: var(--ssb-space-xs);
    border-block-end: 2px solid var(--ssb-color-accent);
    font-size: 1rem; font-weight: 700;
}
.ssb-japan-map__list {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--ssb-space-xs);
    font-size: .875rem;
}
.ssb-japan-map__link {
    display: inline-flex; align-items: baseline; gap: 2px;
    padding: var(--ssb-space-xs) var(--ssb-space-sm);
    color: inherit; text-decoration: none;
    border: 1px solid var(--ssb-color-border); border-radius: 4px;
}
.ssb-japan-map__link:hover { background: var(--ssb-color-subtle, #f3f4f6); border-color: var(--ssb-color-accent); }
.ssb-japan-map__count { color: var(--ssb-color-muted); font-size: .75rem; }
.ssb-japan-map__item.is-empty .ssb-japan-map__link { color: var(--ssb-color-muted); border-style: dashed; }

/* footer social links */
.ssb-social-links {
    list-style: none; padding: 0; margin: 0 0 var(--ssb-space-md);
    display: flex; flex-wrap: wrap; gap: var(--ssb-space-sm);
}
.ssb-social-links__link {
    display: inline-flex; align-items: center; justify-content: center;
    padding: var(--ssb-space-xs) var(--ssb-space-md);
    border: 1px solid var(--ssb-color-border); border-radius: 999px;
    color: inherit; text-decoration: none; font-size: .875rem;
}
.ssb-social-links__link:hover { background: var(--ssb-color-subtle, #f3f4f6); }

/* share */
.ssb-share { margin-block: var(--ssb-space-lg); }
.ssb-share__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--ssb-space-sm); }
.ssb-share__link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 4rem; padding: var(--ssb-space-xs) var(--ssb-space-md);
    border: 1px solid var(--ssb-color-border); border-radius: 4px;
    color: inherit; text-decoration: none; font-size: .875rem;
}
.ssb-share__link:hover { background: var(--ssb-color-subtle, #f3f4f6); }