/*
Theme Name: Kiekkoanalyysi Child
Template: kadence
Description: Child theme for kiekkoanalyysi.com — content + table styles for pipeline-generated hockey articles, with per-content-type accents (players / teams / rules).
Version: 1.0
*/

/* ============================================================
   PALETTE — Finnish hockey: ice blue on near-white.
   Per-category accent is swapped via --ka-accent further down,
   so headings, table headers, callout borders all re-tint at once.
   ============================================================ */
:root {
    --ka-ink:        #16202b;  /* slate near-black: body headings */
    --ka-accent:     #1b6ec2;  /* rink blue (default = players) */
    --ka-accent-dark:#15558f;
    --ka-band:       #eef3f8;   /* table head + callout band (light ice) */
    --ka-paper:      #ffffff;
    --ka-zebra:      #f6f9fc;   /* table zebra striping */
    --ka-line:       #d8e1ea;   /* borders */
    --ka-muted:      #5a6b7a;   /* secondary text */
}

/* ============================================================
   CONTENT ELEMENT STYLES
   Pipeline-generated articles use these classes. Match the real
   generated markup: .insider-tip / .player-stats / .schema-faq
   (h3+p, no .faq-item wrapper) / .decision-cta.
   ============================================================ */

/* --- Insider / analysis callout (writer emits <strong>Analyysi:</strong>) --- */
.insider-tip {
    background: var(--ka-band);
    border-left: 3px solid var(--ka-accent);
    padding: 14px 18px;
    margin: 24px 0;
    border-radius: 0 4px 4px 0;
}
.insider-tip strong { color: var(--ka-ink); }

/* --- Decision CTA box --- */
.decision-cta {
    background: var(--ka-band);
    border: 2px solid var(--ka-accent);
    border-radius: 6px;
    padding: 18px 24px;
    margin: 32px 0 16px;
    text-align: center;
}
.decision-cta a {
    color: var(--ka-ink);
    font-weight: 600;
    font-size: 1.05em;
    text-decoration: none;
}
.decision-cta a:hover { color: var(--ka-accent); }

/* --- Disabled internal links (drip placeholders the pipeline emits) --- */
.nav-link-disabled { color: #98a4b0; font-style: italic; cursor: default; }
.inline-link-disabled { all: unset; }

/* --- FAQ section (schema-faq → h3 question, p answer) --- */
.schema-faq {
    margin: 36px 0 24px;
    border-top: 1px solid var(--ka-line);
    padding-top: 24px;
}
.schema-faq h3 {
    font-size: 1.1em;
    margin-bottom: 6px;
    color: var(--ka-ink);
}
.schema-faq p { color: var(--ka-muted); }

/* ============================================================
   PLAYER INFO CARD (.player-infobox)
   Deterministic card injected at the top of every player profile (no photo —
   a data graphic takes its place). Sleek, modern "player card": accent header
   band with the name + jersey/position badge, then a two-column body (labelled
   bio grid + stat panel) that stacks on mobile. Re-tints with --ka-accent.
   ============================================================ */
.player-infobox {
    border-radius: 16px;
    overflow: hidden;
    margin: 8px 0 30px;
    background: var(--ka-paper);
    border: 1px solid var(--ka-line);
    box-shadow: 0 6px 24px rgba(22, 32, 43, 0.10);
}

/* --- Header band (the visual anchor, in place of a photo) --- */
.player-infobox .pib-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    background: linear-gradient(135deg, var(--ka-accent) 0%, var(--ka-accent-dark) 100%);
    color: #fff;
}
.player-infobox .pib-name {
    margin: 0;
    font-size: 1.4em;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #fff;
}
.player-infobox .pib-role {
    margin: 4px 0 0;
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.85);
}
.player-infobox .pib-badge {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    min-width: 50px;
    height: 50px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    font-size: 1.2em;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --- Body: bio grid (left) + stat panel (right) --- */
.player-infobox .pib-grid {
    display: grid;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .player-infobox .pib-grid { grid-template-columns: 1.3fr 1fr; }
}
.player-infobox .pib-facts { margin: 0; padding: 14px 22px; }
.player-infobox .pib-facts > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--ka-line);
}
.player-infobox .pib-facts > div:last-child { border-bottom: none; }
.player-infobox .pib-facts dt {
    color: var(--ka-muted);
    font-size: 0.7em;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.player-infobox .pib-facts dd {
    margin: 0;
    font-weight: 700;
    color: var(--ka-ink);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --- Stat panel --- */
.player-infobox .player-stathero {
    background: var(--ka-band);
    border-top: 1px solid var(--ka-line);
    padding: 16px 22px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
@media (min-width: 640px) {
    .player-infobox .player-stathero { border-top: none; border-left: 1px solid var(--ka-line); }
}
.player-stathero .psh-season {
    margin: 0;
    font-size: 0.7em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ka-muted);
    font-weight: 600;
}
.player-stathero .psh-line {
    margin: 0;
    font-size: 1.5em;
    font-weight: 800;
    color: var(--ka-accent-dark);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.player-stathero .psh-spark { margin: 8px 0 2px; }
.player-stathero .psh-spark-svg {
    display: block;
    width: 100%;
    height: 36px;
    color: var(--ka-accent);
}
.player-stathero .psh-bar { fill: currentColor; opacity: 0.9; }
.player-stathero .psh-spark figcaption {
    font-size: 0.68em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ka-muted);
    margin-top: 3px;
}
.player-stathero .psh-career { margin: 0; color: var(--ka-ink); font-size: 0.9em; font-weight: 600; }
.player-stathero .pib-sources {
    margin: 6px 0 0;
    font-size: 0.7em;
    color: var(--ka-muted);
    line-height: 1.4;
}

/* ============================================================
   TABLES
   Desktop base ported from the LTP/HB child themes, plus three
   hockey-stat upgrades on the career table (.player-stats):
   right-aligned number columns, zebra striping, sticky header.
   ============================================================ */

.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-variant-numeric: tabular-nums;   /* digits line up in columns */
}
.entry-content thead th {
    background: var(--ka-band);
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--ka-line);
    font-size: 0.95em;
    color: var(--ka-ink);
}
.entry-content tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--ka-line);
}
.entry-content tbody tr:nth-child(even) td { background: var(--ka-zebra); }   /* zebra */
.entry-content tbody tr:last-child td { border-bottom: none; }

/* --- Player career table specifics --- */
/* Columns are: Kausi | Joukkue | Sarja | Ottelut | Maalit | Syötöt | Pisteet | Jäähyt | +/-
   Cols 4+ are numeric → right-align (header + cells) for readability. */
.player-stats th:nth-child(n+4),
.player-stats td:nth-child(n+4) { text-align: right; }
/* Sticky header for the long season-by-season list. If Kadence's sticky
   site header overlaps it, raise this `top` to the header's height. */
.player-stats thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* --- Responsive wrapper (pipeline wraps every table in .table-wrap; 3+ col
       tables also get .table-stacked) --- */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 20px 0;
}
.table-wrap table { margin: 0; }

@media (max-width: 600px) {
    .table-wrap table { font-size: 0.9em; }
    .table-wrap thead th, .table-wrap tbody td { padding: 8px 10px; }

    /* GENERIC comparison tables (rules, league-system, etc.): stacked-card
       layout — each row becomes a labelled card. The LTP/HB pattern. */
    .table-wrap.table-stacked thead { display: none; }
    .table-wrap.table-stacked tbody,
    .table-wrap.table-stacked tbody tr,
    .table-wrap.table-stacked tbody td { display: block; width: 100%; }
    .table-wrap.table-stacked tbody tr {
        background: var(--ka-paper);
        border: 1px solid var(--ka-line);
        border-radius: 6px;
        margin-bottom: 12px;
        padding: 4px 0;
    }
    .table-wrap.table-stacked tbody td {
        padding: 8px 14px;
        border-bottom: 1px solid var(--ka-line);
        text-align: left;
        position: relative;
        padding-left: 40%;
    }
    .table-wrap.table-stacked tbody td:last-child { border-bottom: none; }
    .table-wrap.table-stacked tbody td::before {
        content: attr(data-label);
        position: absolute;
        left: 14px;
        width: 35%;
        font-weight: 600;
        font-size: 0.85em;
        color: var(--ka-ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .table-wrap.table-stacked tbody td:first-child {
        background: var(--ka-ink);
        color: var(--ka-paper);
        font-weight: 600;
        padding-left: 14px;
        border-radius: 6px 6px 0 0;
    }
    .table-wrap.table-stacked tbody td:first-child::before { display: none; }

    /* ----------------------------------------------------------------
       PLAYER CAREER TABLE opts OUT of stacked cards (27 rows × 9 cols =
       far too many cards). MOBILE OPTION 1 (active): keep it a real table
       that scrolls sideways, with the season column frozen on the left —
       the Eliteprospects / Hockey-Reference pattern hockey readers know.
       ---------------------------------------------------------------- */
    .player-stats .table-wrap.table-stacked thead { display: table-header-group; }
    .player-stats .table-wrap.table-stacked tbody { display: table-row-group; }
    .player-stats .table-wrap.table-stacked tbody tr {
        display: table-row;
        background: none; border: 0; margin: 0; padding: 0;
    }
    .player-stats .table-wrap.table-stacked tbody td {
        display: table-cell;
        width: auto;
        padding: 8px 10px;
        position: static;
        border-bottom: 1px solid var(--ka-line);
    }
    .player-stats .table-wrap.table-stacked tbody td::before { display: none; }
    .player-stats .table-wrap.table-stacked tbody td:first-child {
        background: var(--ka-paper);
        color: var(--ka-ink);
        border-radius: 0;
    }
    /* freeze the season (1st) column while the rest scrolls */
    .player-stats .table-wrap th:first-child,
    .player-stats .table-wrap td:first-child {
        position: sticky;
        left: 0;
        background: var(--ka-paper);
        z-index: 1;
    }
    .player-stats .table-wrap thead th:first-child { background: var(--ka-band); }

    /* ----------------------------------------------------------------
       MOBILE OPTION 2 (try later): instead of scrolling, hide the
       secondary columns on phones — show only Kausi, Joukkue, Sarja,
       Ottelut, Pisteet. To switch, comment out the Option-1 block above
       and uncomment this:

    .player-stats .table-wrap.table-stacked thead { display: table-header-group; }
    .player-stats .table-wrap.table-stacked tbody { display: table-row-group; }
    .player-stats .table-wrap.table-stacked tbody tr { display: table-row; background:none; border:0; margin:0; padding:0; }
    .player-stats .table-wrap.table-stacked tbody td { display: table-cell; width:auto; position:static; padding:8px 10px; }
    .player-stats .table-wrap.table-stacked tbody td::before { display:none; }
    .player-stats th:nth-child(5),   .player-stats td:nth-child(5),
    .player-stats th:nth-child(6),   .player-stats td:nth-child(6),
    .player-stats th:nth-child(8),   .player-stats td:nth-child(8),
    .player-stats th:nth-child(9),   .player-stats td:nth-child(9) { display: none; }
       ---------------------------------------------------------------- */
}

/* ============================================================
   PER-CONTENT-TYPE ACCENTS
   functions.php adds a `category-<slug>` class to <body> on single
   posts (WP core only does that on archives). Swapping --ka-accent
   re-tints headers, table heads, callout borders for each type.
   Keep it subtle: same layout, different signal colour.
   ============================================================ */
body.category-pelaajat        { --ka-accent: #1b6ec2; --ka-accent-dark: #15558f; } /* players: rink blue */
body.category-joukkueet       { --ka-accent: #566b7d; --ka-accent-dark: #41525f; } /* teams: steel (DB team colours override later) */
body.category-saannot         { --ka-accent: #1b8a8a; --ka-accent-dark: #136a6a; } /* rules: teal (reference) */
body.category-sarjajarjestelma{ --ka-accent: #1b8a8a; --ka-accent-dark: #136a6a; } /* league system: teal */
body.category-kilpailut       { --ka-accent: #7a5bb0; --ka-accent-dark: #5f4690; } /* competitions: violet */
body.category-vedonlyonti     { --ka-accent: #c2761b; --ka-accent-dark: #9c5e15; } /* betting: amber (later) */

/* Thin category accent rule under the post title area, so each type reads
   distinct at a glance without restructuring the template. */
.entry-content h2 {
    color: var(--ka-ink);
    border-bottom: 2px solid var(--ka-band);
    padding-bottom: 4px;
}
.entry-content a { color: var(--ka-accent); }
.entry-content a:hover { color: var(--ka-accent-dark); }