/* ==================================================================
 * kdw-lp: legacy LP / use-case grid overrides
 * ------------------------------------------------------------------
 * Restyles markup emitted by the immutable mu-plugin
 * kodawari-docker/wp-content/mu-plugins/fix-product-layout.php:
 *   - .khl-*   heatstroke LP (kodawari_heatstroke_lp_shortcode)
 *              harassment LP (kodawari_harassment_lp_shortcode)
 *   - .kpgh-*  poster product page "official poster print" hub grid
 *
 * We do NOT and cannot edit the mu-plugin (keep-group / immutable),
 * so every rule below is a THEME override on top of the plugin's own
 * inline `<style>` blocks. Markup/classes/icon() calls are untouched.
 *
 * Cascade note: the plugin's `.khl-*` styles print via a `wp_head`
 * callback at the default priority (10), which runs AFTER WordPress's
 * own `wp_print_styles` (priority 8) — so this stylesheet's <link>
 * lands earlier in <head> than the plugin's inline <style>. Its
 * `.kpgh-*` styles print inline in the page <body>, which is always
 * after <head>. In both cases, on an equal-specificity tie the
 * plugin's later rule would win — so most selectors below repeat a
 * class token (e.g. `.khl-hero.khl-hero`) to add +1 class specificity
 * and win deterministically, without `!important`.
 *
 * A handful of plugin declarations are themselves flagged
 * `!important`, or are literal inline `style="color:#1F3A5F"` on an
 * anchor (inline style beats any external rule outright). Those few
 * are called out with a comment and matched with `!important` too —
 * there is no specificity trick that beats them.
 * ================================================================== */

/* ---------- shared container / typography ---------- */
.khl.khl {
    font-family: var(--font-body);
    color: var(--ink);
}
.khl.khl h2 {
    font-family: var(--font-head);
    color: var(--ink);
}
.khl h2 .khl-h2-sub.khl-h2-sub {
    font-family: var(--font-body);
    color: var(--muted);
    font-weight: 800;
}
.khl.khl p { color: var(--ink); }

/* two in-copy footnote links carry a literal inline `style="color:#1F3A5F"`.
   Inline styles win over any external rule regardless of specificity,
   so !important is the only way to re-theme them. */
.khl a[style*="1F3A5F"] { color: var(--ink) !important; text-decoration: underline; }

/* ---------- hero ---------- */
.khl-hero.khl-hero {
    background: var(--accent);
    border: var(--bd);
    border-radius: var(--r-card);
}
.khl-hero .khl-tag.khl-tag {
    background: var(--ink);
    color: #fff;
    border-radius: var(--r-pill);
    font-family: var(--font-head);
}
.khl-hero.khl-hero h1 {
    font-family: var(--font-head);
    color: var(--ink);
}
.khl-hero.khl-hero h1 strong { color: var(--ink); }
.khl-hero .khl-lead.khl-lead { color: var(--ink); opacity: .82; }

/* ---------- buttons ---------- */
.khl-btn.khl-btn {
    font-family: var(--font-head);
    border-radius: var(--r-pill);
    border: var(--bd);
    transition: transform .15s, opacity .15s;
    box-shadow: none;
}
.khl-btn.khl-btn:hover { transform: translateY(-1px); opacity: .9; }
.khl-btn-primary.khl-btn-primary {
    background: var(--ink);
    /* .khl-btn-primary{color:#fff!important} in the plugin already matches
       the white text we want on a dark button — no override needed. */
}
.khl-btn-outline.khl-btn-outline {
    background: var(--paper);
    border-color: var(--ink);
    /* plugin sets `color:#1F3A5F !important` on this class; must match
       importance to re-theme the label to ink. */
    color: var(--ink) !important;
}
.khl-btn-outline.khl-btn-outline:hover { background: var(--accent-soft); }

/* ---------- "why now" callout ---------- */
.khl-why.khl-why {
    background: var(--paper);
    border: var(--bd);
    border-radius: var(--r-card);
}
.khl-why h3 { color: var(--ink); font-family: var(--font-head); }
.khl-why ul { color: var(--ink); }

/* ---------- 4-step process ---------- */
.khl-step.khl-step {
    background: var(--paper);
    border: var(--bd);
    border-radius: var(--r-card);
}
.khl-step-num.khl-step-num {
    background: var(--accent);
    color: var(--accent-ink);
    border: var(--bd);
}
.khl-step-icon.khl-step-icon { color: var(--ink); }
.khl-step.khl-step h4 { color: var(--ink); font-family: var(--font-head); }
.khl-step.khl-step p { color: var(--muted); }

/* ---------- available materials grid ---------- */
.khl-mat.khl-mat {
    background: var(--paper);
    border: var(--bd);
    border-radius: var(--r-card);
}
.khl-mat-title.khl-mat-title { color: var(--ink); }
.khl-mat-title .khl-tag-mini.khl-tag-mini {
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: var(--r-pill);
    font-weight: 800;
}
.khl-mat.khl-mat ul { color: var(--ink); }
.khl-mat-link.khl-mat-link { border-top-color: var(--line-soft); }
.khl-mat-link.khl-mat-link a { color: var(--ink); }

/* ---------- sample poster gallery ---------- */
.khl-sample.khl-sample {
    background: var(--paper);
    border: var(--bd);
    border-radius: var(--r-card);
}
.khl-sample.khl-sample:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: none; }
/* plugin sets `color:#555555 !important` on the title */
.khl-sample-title.khl-sample-title { color: var(--ink) !important; }
.khl-sample-source.khl-sample-source { color: var(--muted); }

/* ---------- recommended spec table ---------- */
.khl-spec.khl-spec { background: var(--paper-soft); border: var(--bd); border-radius: var(--r-card); }
.khl-spec.khl-spec th { background: var(--accent-soft); color: var(--ink); border-bottom-color: var(--line-soft); }
.khl-spec.khl-spec td { border-bottom-color: var(--line-soft); color: var(--ink); }
.khl-spec.khl-spec td b { color: var(--ink); }

/* ---------- price examples ---------- */
.khl-price-card.khl-price-card {
    background: var(--paper);
    border: var(--bd);
    border-radius: var(--r-card);
}
.khl-price-card.khl-feature.khl-feature {
    border-color: var(--ink);
    background: var(--accent-soft);
}
.khl-price-card.khl-feature.khl-feature::before {
    content: "おすすめ";
    background: var(--accent);
    color: var(--accent-ink);
    border: var(--bd);
    border-radius: var(--r-pill);
}
.khl-price-spec.khl-price-spec { color: var(--muted); }
.khl-price-amount.khl-price-amount { color: var(--ink); font-family: var(--font-head); }
.khl-price-amount .khl-tax.khl-tax { color: var(--muted); }
.khl-price-detail.khl-price-detail { color: var(--muted); }

/* ---------- FAQ ---------- */
.khl-faq.khl-faq details {
    background: var(--paper);
    border: var(--bd);
    border-radius: var(--r-card);
}
.khl-faq.khl-faq summary { color: var(--ink); font-family: var(--font-head); }
.khl-faq.khl-faq summary::before { color: var(--ink); }
.khl-faq.khl-faq summary::after { color: var(--ink); }
.khl-faq.khl-faq .khl-faq-a { color: var(--ink); border-top-color: var(--line-soft); }
.khl-faq.khl-faq .khl-faq-a::before { color: var(--muted); }

/* ---------- final CTA band ---------- */
.khl-final.khl-final {
    background: var(--ink);
    border: var(--bd);
    border-radius: var(--r-card);
}
.khl-final.khl-final h2,
.khl-final.khl-final h2 .khl-h2-sub {
    color: #fff;
}
.khl-final.khl-final p { color: #fff; opacity: .85; }
.khl-final .khl-btn-primary.khl-btn-primary {
    background: var(--accent);
    /* plugin sets `.khl-final .khl-btn-primary{color:#1F3A5F!important}`;
       must match importance to re-theme the label to ink on the accent chip. */
    color: var(--accent-ink) !important;
}
/* The second button in this row has a literal inline
   `style="background:transparent;color:#fff!important;border-color:#fff"`
   which already reads correctly (white outline on the dark band) —
   left untouched; only shape/typography come from .khl-btn above. */

/* ==================================================================
 * poster product page: "official poster print" hub grid (.kpgh-*)
 * printed inline in <body> by fix-product-layout.php on product 1765
 * ================================================================== */
.kodawari-print-guide-hub .kpgh-inner.kpgh-inner {
    background: var(--paper-soft);
    border: var(--bd);
    border-radius: var(--r-card);
}
.kpgh-badge.kpgh-badge {
    background: var(--ink);
    color: #fff;
    border-radius: var(--r-pill);
    font-family: var(--font-head);
}
.kpgh-title.kpgh-title { color: var(--ink); font-family: var(--font-head); }
.kpgh-lead.kpgh-lead { color: var(--ink); opacity: .82; }
.kpgh-card.kpgh-card {
    background: var(--paper);
    border: var(--bd);
    border-radius: var(--r-card);
}
.kpgh-card.kpgh-card:hover {
    border-color: var(--ink);
    background: var(--accent-soft);
    transform: translateY(-2px);
    box-shadow: none;
}
.kpgh-card-tag.kpgh-card-tag {
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: var(--r-pill);
    font-weight: 800;
}
/* plugin sets `color:#555555 !important` on the card title */
.kpgh-card-title.kpgh-card-title { color: var(--ink) !important; }
.kpgh-card-desc.kpgh-card-desc { color: var(--muted); }
.kpgh-card-meta.kpgh-card-meta { border-top-color: var(--line-soft); }
.kpgh-card-meta-row.kpgh-card-meta-row { color: var(--muted); }
/* plugin sets `color:#1F3A5F !important` on the card CTA */
.kpgh-card-cta.kpgh-card-cta { color: var(--ink) !important; }
.kpgh-note.kpgh-note { color: var(--muted); }
