/*
Theme Name: akiyabaikyaku child
Theme URI: https://akiyabaikyaku.com/
Description: 空き家売却.COM — SWELL child theme. Readability-focused layout ported from the Wired-style refinements built for kenji-shigunaru-child v0.2/v0.3: 720px content width, generous line height and letter spacing, mobile UX tuning, simplified heading rules, readable tables, and a low-key .cta-box style for assessment CTAs. Tuned for readers in their 40s-60s (body text kept at 17px or larger on all viewports).
Author: knocksair
Template: swell
Version: 0.1.1
Text Domain: akiyabaikyaku-child
*/

/* ---------------------------------------------------------------------
 * Design tokens
 * Accent colors follow the site's existing SWELL palette
 * (--color_main: #04384c, --color_link: #1176d4) for brand consistency.
 * System sans stack only — no webfont import, to keep first paint fast.
 * --------------------------------------------------------------------- */
:root {
    --akiya-font-sans: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
        'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Noto Sans JP',
        'Yu Gothic Medium', Meiryo, sans-serif;
    --akiya-color-text: #1a1a1a;
    --akiya-color-text-muted: #555;
    --akiya-color-accent: #04384c;       /* site main color (dark navy) */
    --akiya-color-link: #1176d4;         /* site link color */
    --akiya-color-rule: #d8d8d3;
    --akiya-color-stripe: #f4f7f8;
    --akiya-color-cta-border: #ccc;
}

/* ---------------------------------------------------------------------
 * Base typography
 * Readers are mainly in their 40s-60s: body text stays at 17px minimum
 * on every viewport, with wide line height and slight letter spacing.
 * --------------------------------------------------------------------- */
body {
    color: var(--akiya-color-text);
    font-family: var(--akiya-font-sans);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.9;
    letter-spacing: 0.02em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .p-postList__title, .c-postTitle__ttl {
    font-family: var(--akiya-font-sans);
    font-weight: 700;
    color: var(--akiya-color-text);
    line-height: 1.4;
    letter-spacing: 0.01em;
}

/* ---------------------------------------------------------------------
 * Single post / page title
 * SWELL 2.12: .p-articleHead.c-postTitle > .c-postTitle__ttl
 * --------------------------------------------------------------------- */
.single .c-postTitle__ttl,
.page .c-postTitle__ttl,
.single h1.entry-title,
.page h1.entry-title {
    font-size: clamp(1.7em, 3.5vw, 2.2em);
    line-height: 1.35;
    letter-spacing: 0;
    margin-bottom: 0.6em;
}
.c-postTitle__date {
    font-size: 0.85em;
    color: var(--akiya-color-text-muted);
    letter-spacing: 0.05em;
}

/* ---------------------------------------------------------------------
 * Content width — 720px centered on desktop (ported from kenji A1).
 * Applied to the body container inside .l-mainContent so it works both
 * with and without a sidebar. The sidebar itself is left untouched
 * (it can carry assessment CTA widgets on this site).
 * --------------------------------------------------------------------- */
@media (min-width: 769px) {
    .single .post_content,
    .single .entry-content,
    .page .post_content,
    .page .entry-content,
    .single .p-articleHead,
    .page .p-articleHead {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }
    /* Keep article-bottom modules (related posts etc.) aligned with body */
    .single .l-articleBottom__section {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---------------------------------------------------------------------
 * In-post headings — quiet editorial rules instead of heavy boxes.
 * h2: bottom rule in site navy / h3: left rule / h4: muted.
 * --------------------------------------------------------------------- */
.post_content h2,
.entry-content h2 {
    font-size: 1.55em;
    margin-top: 2.5em;
    margin-bottom: 1em;
    padding: 0 0 0.4em 0;
    background: none;
    border-left: none;
    border-bottom: 2px solid var(--akiya-color-accent);
    color: var(--akiya-color-text);
}
.post_content h3,
.entry-content h3 {
    font-size: 1.25em;
    margin-top: 2em;
    margin-bottom: 0.8em;
    padding-left: 0.8em;
    background: none;
    border-bottom: none;
    border-left: 4px solid var(--akiya-color-accent);
}
.post_content h4,
.entry-content h4 {
    font-size: 1.1em;
    margin-top: 1.8em;
    margin-bottom: 0.6em;
    color: var(--akiya-color-text-muted);
    background: none;
    border: none;
}

/* ---------------------------------------------------------------------
 * Paragraphs
 * --------------------------------------------------------------------- */
.post_content p,
.entry-content p {
    margin: 0 0 1.5em 0;
    text-align: justify;
    text-justify: inter-character;
}

/* ---------------------------------------------------------------------
 * Links — keep the site's link blue, improve underline legibility.
 * --------------------------------------------------------------------- */
.post_content a,
.entry-content a {
    color: var(--akiya-color-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}
.post_content a:hover,
.entry-content a:hover {
    color: var(--akiya-color-accent);
    text-decoration-thickness: 2px;
}

/* ---------------------------------------------------------------------
 * Tables — simple horizontal rules, striped rows (ported from kenji).
 * Useful for cost comparisons / procedure tables on this site.
 * --------------------------------------------------------------------- */
.post_content table,
.entry-content table,
.wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    margin: 2em 0;
    font-size: 0.95em;
    border-top: 2px solid var(--akiya-color-accent);
    border-bottom: 2px solid var(--akiya-color-accent);
}
.post_content table thead th,
.entry-content table thead th,
.wp-block-table table thead th {
    background: transparent;
    color: var(--akiya-color-text);
    font-weight: 700;
    text-align: left;
    padding: 0.9em 1em;
    border-bottom: 1px solid var(--akiya-color-accent);
    border-right: none;
}
.post_content table td,
.entry-content table td,
.wp-block-table table td {
    padding: 0.9em 1em;
    border-bottom: 1px solid var(--akiya-color-rule);
    border-right: none;
    vertical-align: top;
    line-height: 1.7;
}
.post_content table tbody tr:nth-child(even),
.entry-content table tbody tr:nth-child(even),
.wp-block-table table tbody tr:nth-child(even) {
    background: var(--akiya-color-stripe);
}
.post_content table tbody tr:last-child td,
.entry-content table tbody tr:last-child td,
.wp-block-table table tbody tr:last-child td {
    border-bottom: none;
}

/* ---------------------------------------------------------------------
 * Blockquote / lists / hr
 * --------------------------------------------------------------------- */
.post_content blockquote,
.entry-content blockquote {
    font-size: 1.05em;
    line-height: 1.85;
    color: var(--akiya-color-text-muted);
    border-left: 4px solid var(--akiya-color-accent);
    padding: 0.5em 0 0.5em 1.5em;
    margin: 2em 0;
    background: transparent;
}
.post_content ul, .post_content ol,
.entry-content ul, .entry-content ol {
    margin: 1em 0 1.5em 1.2em;
    padding: 0;
}
.post_content li,
.entry-content li {
    margin-bottom: 0.5em;
    line-height: 1.85;
}
.post_content hr,
.entry-content hr {
    border: none;
    border-top: 1px solid var(--akiya-color-rule);
    margin: 2.5em 0;
}

/* ---------------------------------------------------------------------
 * .cta-box — low-key assessment CTA box (new for this site).
 * Thin 1px border, rounded corners, generous padding, modest filled
 * button in the site navy. Markup example:
 *
 *   <div class="cta-box">
 *     <p class="cta-box__title">空き家の売却価格が気になる方へ</p>
 *     <p>まずは無料査定で相場を確認してみませんか。</p>
 *     <a class="cta-box__btn" href="/satei/">無料査定を依頼する</a>
 *   </div>
 * --------------------------------------------------------------------- */
.cta-box {
    border: 1px solid var(--akiya-color-cta-border);
    border-radius: 8px;
    padding: 1.6em 1.6em 1.8em;
    margin: 2.5em 0;
    background: #fff;
}
.cta-box__title,
.cta-box p.cta-box__title,
.cta-box__heading,
.cta-box p.cta-box__heading {
    font-weight: 700;
    font-size: 1.1em;
    color: var(--akiya-color-accent);
    margin: 0 0 0.6em;
    text-align: left;
}
.cta-box p {
    margin: 0 0 1em;
    text-align: left;
}
.cta-box__btn,
.post_content .cta-box a.cta-box__btn,
.entry-content .cta-box a.cta-box__btn,
.cta-box .wp-block-button__link,
.post_content .cta-box .wp-block-button__link,
.entry-content .cta-box .wp-block-button__link {
    display: inline-block;
    background: var(--akiya-color-accent);
    color: #fff;
    font-weight: 700;
    font-size: 1em;
    line-height: 1.4;
    padding: 0.8em 2em;
    border-radius: 6px;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.cta-box__btn:hover,
.post_content .cta-box a.cta-box__btn:hover,
.entry-content .cta-box a.cta-box__btn:hover,
.cta-box .wp-block-button__link:hover,
.post_content .cta-box .wp-block-button__link:hover,
.entry-content .cta-box .wp-block-button__link:hover {
    opacity: 0.85;
    color: #fff;
}
@media (max-width: 768px) {
    .cta-box {
        padding: 1.3em 1.2em 1.5em;
    }
    .cta-box__btn,
    .post_content .cta-box a.cta-box__btn,
    .entry-content .cta-box a.cta-box__btn,
    .cta-box .wp-block-button__link,
    .post_content .cta-box .wp-block-button__link,
    .entry-content .cta-box .wp-block-button__link {
        display: block;
        text-align: center;
    }
}

/* ---------------------------------------------------------------------
 * Mobile UX (ported from kenji A3, adjusted for older readers:
 * body stays at 17px instead of dropping to 16.5px).
 * --------------------------------------------------------------------- */
@media (max-width: 768px) {
    body {
        font-size: 17px;
        line-height: 1.9;
        letter-spacing: 0.02em;
    }
    .single .post_content,
    .single .entry-content,
    .page .post_content,
    .page .entry-content {
        padding-left: 4vw;
        padding-right: 4vw;
    }
    .post_content p,
    .entry-content p {
        margin-bottom: 1.4em;
    }
    .single .c-postTitle__ttl,
    .page .c-postTitle__ttl,
    .single h1.entry-title {
        font-size: clamp(1.45em, 5.5vw, 1.7em);
        line-height: 1.4;
    }
    .post_content h2,
    .entry-content h2 {
        font-size: 1.35em;
        margin-top: 2em;
        margin-bottom: 0.8em;
    }
    .post_content h3,
    .entry-content h3 {
        font-size: 1.15em;
    }
    .c-postTitle__date {
        font-size: 0.8em;
    }
}