/*
Theme Name: CounselorAI v2
Theme URI: https://counselorai.io
Description: CounselorAI light redesign — child of Twenty Twenty-Five. Colour and type live in theme.json; this file carries structure and block-level application only.
Author: CounselorAI
Template: twentytwentyfive
Version: 2.0.0
*/

/* ---------------------------------------------------------------
   All colour below resolves from theme.json presets. Do not
   introduce raw hex here — add or change the token instead.
   --------------------------------------------------------------- */

:root {
    /* Design tokens — the brief's palette. Older --cai-* aliases are kept
       below because legacy content classes still resolve through them. */
    --bg:       #FAF9F7;
    --ink:      #14161B;
    --ink2:     #1D1F24;
    --muted:    #5C6068;
    /* The brief specifies --soft #8B8F97, but as small text that measures
       3.24:1 on white and 2.90:1 on the frame bar — well under AA, and the
       same brief requires zero contrast failures. Darkened to the lightest
       value that clears 4.5:1 on all three grounds it lands on. */
    --soft:     #686D75;
    --line:     #E4E1DB;
    --gold:     #E0A335;
    --goldink:  #8A6D22;   /* gold TEXT on light — #E0A335 fails contrast */
    --goldbg:   #FDF6E7;
    --goldline: #F0DFB6;

    --cai-shell: var(--bg);
    --cai-white: #ffffff;
    --cai-fog:   #F4F2EE;
    --cai-ink:   var(--ink);
    --cai-body:  var(--ink2);
    --cai-muted: var(--muted);
    --cai-line:  var(--line);
    --cai-sky:   var(--wp--preset--color--c-sky, #2f6fd0);
}

body { background-color: var(--cai-shell); color: var(--cai-body); }
::selection { background: var(--cai-ink); color: var(--cai-white); }

h1, h2, h3, h4, h5, h6,
.wp-block-heading, .wp-block-site-title, .has-heading-font-family {
    font-family: 'Sora', sans-serif !important;
    font-style: normal !important;
    color: var(--cai-ink);
}

body, p, a, li, td, th, span,
.wp-block-paragraph, .wp-block-list,
.wp-block-navigation-item, .wp-block-button__link,
.wp-element-button, .has-body-font-family {
    font-family: 'DM Sans', sans-serif !important;
    font-style: normal !important;
}

/* Links — ink, not c-sky. The accent tokens are marks only: c-sky measures
   4.47:1 on fog, so any link sitting on a tinted surface would fail AA.
   Affordance comes from the underline instead of from hue. */
a { color: var(--cai-ink); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--cai-ink); text-decoration-thickness: 2px; }

blockquote, .wp-block-quote {
    border-left: 3px solid var(--cai-sky);
    font-style: italic;
    color: var(--cai-body);
}
/* ---------------------------------------------------------------
   Header — 68px, single row, one CTA. Replaces the two-row nav that
   was costing ~19% of the fold.
   --------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 84px;   /* 68px bar + breathing room */
}
.wp-site-blocks > header.wp-block-template-part {
    position: sticky; top: 0; z-index: 60;
    background: rgba(250, 249, 247, .9);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}
/* backdrop-filter makes an element a containing block for position:fixed
   children, which trapped the mobile menu overlay inside the header. Drop it
   whenever an overlay is open, and on small screens. */
html.has-modal-open .wp-site-blocks > header.wp-block-template-part,
.cai-hdr.is-open .wp-site-blocks > header.wp-block-template-part {
    -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg);
}
.cai-hdr { margin: 0 !important; }
.cai-hdr__wrap {
    height: 68px; max-width: 1200px; margin: 0 auto; padding: 0 40px;
    display: flex; align-items: center; gap: 40px;
}
.cai-hdr__logo { display: flex; align-items: center; gap: 9px; text-decoration: none; flex: none; }
.cai-hdr__logo img { height: 28px; width: auto; display: block; }
.cai-hdr__logo b {
    font-family: 'Sora', sans-serif; font-size: 16.5px; font-weight: 600;
    letter-spacing: -.02em; color: var(--ink);
}
.cai-hdr__nav { display: flex; gap: 26px; align-items: center; }
.cai-hdr__nav > a, .cai-hdr__restog {
    font-family: 'DM Sans', sans-serif; font-size: 13.5px; font-weight: 500;
    color: var(--muted); text-decoration: none; background: none; border: 0;
    padding: 0; cursor: pointer; transition: color .15s ease;
}
.cai-hdr__nav > a:hover, .cai-hdr__restog:hover { color: var(--ink); }
.cai-hdr__res { position: relative; }
.cai-hdr__resmenu {
    position: absolute; top: calc(100% + 12px); left: -14px; min-width: 190px;
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    padding: 8px; display: flex; flex-direction: column;
    box-shadow: 0 18px 44px -14px rgba(20,22,27,.2);
}
.cai-hdr__resmenu[hidden] { display: none; }
.cai-hdr__resmenu a {
    font-size: 13.5px; font-weight: 500; color: var(--muted);
    text-decoration: none; padding: 9px 12px; border-radius: 8px;
}
.cai-hdr__resmenu a:hover { background: var(--cai-fog); color: var(--ink); }
.cai-hdr__right { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.cai-hdr__burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.cai-hdr__burger span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px 0; border-radius: 2px; }
.cai-hdr__mobile { display: none; }

/* shared button, used in the header and throughout the homepage */
.cai-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: 'DM Sans', sans-serif; font-weight: 700; text-decoration: none;
    border-radius: 999px; border: 1.5px solid transparent; cursor: pointer;
    white-space: nowrap; transition: background .16s ease, transform .16s ease, border-color .16s ease;
}
.cai-btn-dark { background: var(--ink); color: #fff; }
.cai-btn-dark:hover { background: #000; color: #fff; transform: translateY(-1px); }
.cai-btn-ghost { background: transparent; color: var(--ink); border-color: #D6D2CA; font-weight: 600; }
.cai-btn-ghost:hover { color: var(--ink); border-color: var(--ink); background: #fff; }
.cai-btn-gold { background: var(--gold); color: #14161B; }
.cai-btn-gold:hover { background: #EFB44A; color: #14161B; transform: translateY(-1px); }
.cai-btn-sm { font-size: 13px; padding: 9px 18px; }
.cai-btn-lg { font-size: 16px; padding: 16px 30px; }
.cai-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (max-width: 980px) {
    .cai-hdr__wrap { padding: 0 24px; gap: 16px; }
    .cai-hdr__nav { display: none; }
    /* the primary action stays visible in the collapsed header — never buried
       inside the menu */
    .cai-hdr__right { margin-left: auto; gap: 10px; }
    .cai-hdr__burger { display: block; order: 3; }
    .cai-hdr__mobile {
        display: none; flex-direction: column; gap: 2px;
        padding: 12px 24px 20px; border-top: 1px solid var(--line); background: var(--bg);
    }
    .cai-hdr__mobile:not([hidden]) { display: flex; }
    .cai-hdr__mobile a {
        font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 500;
        color: var(--ink2); text-decoration: none; padding: 11px 0;
        border-bottom: 1px solid var(--line);
    }
    .cai-hdr__mgroup {
        font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
        color: var(--soft); padding: 16px 0 6px;
    }
}
/* Homepage only, below 760px: the hero's own CTA is immediately visible, so the
   header duplicate is noise. Every other template keeps it — there it is the
   only call to action in the collapsed header. */
@media (max-width: 760px) {
    body.home .cai-hdr__right { display: none; }
    body.home .cai-hdr__burger { margin-left: auto; }
}
@media (max-width: 420px) {
    .cai-hdr__wrap { padding: 0 16px; }
    .cai-btn-sm { font-size: 12px; padding: 8px 13px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .cai-btn { transition: none; }
    .cai-btn-dark:hover, .cai-btn-gold:hover { transform: none; }
}

/* Legacy blanket sizing. The homepage is excluded: it has its own clamp and a
   single 760px breakpoint, and this rule's 768px edge left an 8px window where
   the h1 was forced to 40px while still white-space:nowrap — which overflowed
   the viewport horizontally. Every other template keeps the old behaviour. */
@media (max-width: 768px) {
    body:not(.home) h1 { font-size: 2.5rem !important; }
    body:not(.home) h2 { font-size: 2rem !important; }
}

/* Hide page title on homepage */
body.home .wp-block-post-title,
body.page-id-6 .wp-block-post-title,
body.home .entry-title { display: none !important; }

/* Card hover */
.has-dark-card-background-color {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.has-dark-card-background-color:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 30px rgba(20,22,27,0.08) !important;
    border-color: var(--cai-ink) !important;
}

/* Blog grid — equal-height cards */
.wp-block-post-template.is-layout-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    align-items: stretch;
}
.wp-block-post-template.is-layout-grid > .wp-block-post {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.wp-block-post-template.is-layout-grid > .wp-block-post > .wp-block-group {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.wp-block-post-template.is-layout-grid .wp-block-post-excerpt {
    flex: 1;
}
.wp-block-post-template.is-layout-grid .wp-block-post .attachment-post-thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
@media (max-width: 768px) {
    .wp-block-post-template.is-layout-grid {
        grid-template-columns: 1fr;
    }
}

/* Hero text */
.wp-block-cover h1,
.wp-block-cover .wp-block-heading,
.wp-block-cover.is-light h1,
.wp-block-cover.is-dark h1 {
    color: var(--cai-ink) !important;
}
.wp-block-cover p,
.wp-block-cover .wp-block-paragraph,
.wp-block-cover.is-light p,
.wp-block-cover.is-dark p {
    color: var(--cai-body) !important;
}
.wp-block-cover .has-accent-color {
    color: var(--cai-ink) !important;
}

/* Animations */
.wp-block-cover, .wp-block-columns, .wp-block-group > .wp-block-heading,
.wp-block-group > .wp-block-paragraph, .wp-block-buttons, .wp-block-column {
    opacity: 0; transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.counselorai-visible { opacity: 1 !important; transform: translateY(0) !important; }
.wp-block-columns.counselorai-visible > .wp-block-column:nth-child(1) { transition-delay: 0s; }
.wp-block-columns.counselorai-visible > .wp-block-column:nth-child(2) { transition-delay: 0.15s; }
.wp-block-columns.counselorai-visible > .wp-block-column:nth-child(3) { transition-delay: 0.3s; }
.wp-block-columns.counselorai-visible > .wp-block-column:nth-child(4) { transition-delay: 0.45s; }
.wp-block-cover:first-child { opacity: 1; transform: translateY(0); animation: heroFadeIn 1.2s ease-out; }
@keyframes heroFadeIn { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }

/* No-JS / reduced-motion safety: never leave content stuck invisible */
@media (prefers-reduced-motion: reduce) {
    .wp-block-cover, .wp-block-columns, .wp-block-group > .wp-block-heading,
    .wp-block-group > .wp-block-paragraph, .wp-block-buttons, .wp-block-column {
        opacity: 1 !important; transform: none !important; transition: none !important;
    }
}

/* Hide comments */
.comments-area, .wp-block-comments, .wp-block-post-comments-form, #comments, #respond { display: none !important; }

/* Answer Block */
.counselorai-answer-block {
    background: var(--cai-fog);
    border-left: 4px solid var(--cai-ink);
    border-radius: 0 8px 8px 0;
    padding: 20px 24px;
    margin-bottom: 32px;
}
.counselorai-answer-block p { font-size: 1rem; color: var(--cai-body); line-height: 1.7; margin: 0; }
.counselorai-answer-block strong { color: var(--cai-ink); }

/* Comparison Table — custom class */
.counselorai-comparison-table { width: 100%; border-collapse: collapse; margin: 32px 0; font-size: 0.95rem; }
.counselorai-comparison-table thead tr { background: var(--cai-ink); }
.counselorai-comparison-table thead th { padding: 14px 18px; text-align: left; color: var(--cai-white); font-family: 'Sora', sans-serif; font-weight: 600; font-size: 0.9rem; }
.counselorai-comparison-table tbody tr { border-bottom: 1px solid var(--cai-line); }
.counselorai-comparison-table tbody tr:nth-child(even) { background: var(--cai-fog); }
.counselorai-comparison-table tbody td { padding: 12px 18px; color: var(--cai-body); vertical-align: top; line-height: 1.5; }
.counselorai-comparison-table tbody td:first-child { font-weight: 600; color: var(--cai-ink); white-space: nowrap; }
@media (max-width: 640px) { .counselorai-comparison-table { display: block; overflow-x: auto; } }

/* Comparison Table — Gutenberg block tables */
.entry-content .wp-block-table table,
.entry-content table {
    background: transparent;
    border-collapse: collapse;
    width: 100%;
    font-size: 0.95rem;
}
.entry-content .wp-block-table table tr,
.entry-content .wp-block-table table tr:nth-child(even),
.entry-content .wp-block-table table tr:nth-child(odd),
.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(even),
.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background: transparent !important;
}
.entry-content .wp-block-table table th,
.entry-content .wp-block-table table td {
    background: transparent !important;
    color: var(--cai-body) !important;
    border-bottom: 1px solid var(--cai-line);
    padding: 12px 16px;
    vertical-align: top;
    line-height: 1.5;
}
.entry-content .wp-block-table table th {
    color: var(--cai-ink) !important;
    font-family: 'Sora', sans-serif;
    font-weight: 600;
}
.entry-content .wp-block-table table td:first-child {
    font-weight: 600;
    color: var(--cai-ink) !important;
}
/* Zebra composites to an opaque token, not an alpha wash — contrast is
   then computable and stable regardless of what sits behind the table. */
.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(even) {
    background: var(--cai-fog) !important;
}
@media (max-width: 640px) {
    .entry-content .wp-block-table { overflow-x: auto; }
}

/* One reading system sitewide (Phase B.3).
   Blog articles were 16px / ~99 characters; comparison pages were already
   22px / 1.7 / ~72ch. Set on the CONTAINER, not on `p`, so that:
     - bare p/li inherit it,
     - em-sized children (the disclaimer's 0.85em) scale with it,
     - components that size in rem (answer block, FAQ, sources, tables,
       category badge, author bio) are deliberately unaffected.
   Content width stays 800px, which is what yields ~72 characters at 22px. */
body.single .entry-content,
body.single .wp-block-post-content {
    font-size: 22px;
    line-height: 1.7;
}

/* Any table that is not inside a .wp-block-table wrapper scrolls on its own
   rather than pushing the page sideways. /roi-calculator/ has a bare <table>
   that the wrapper-scoped rule never matched (Phase B.3, 360px overflow). */
.entry-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}
@media (min-width: 641px) {
    /* restore normal table layout where there is room for it */
    .entry-content table { display: table; }
}

/* FAQ Section */
.counselorai-faq { margin-top: 60px; padding-top: 48px; border-top: 1px solid var(--cai-line); }
.counselorai-faq h2 { font-family: 'Sora', sans-serif; font-size: 1.8rem; font-weight: 600; color: var(--cai-ink); margin-bottom: 32px; }
.counselorai-faq .faq-item { background: var(--cai-white); border: 1px solid var(--cai-line); border-radius: 8px; padding: 20px 24px; margin-bottom: 12px; }
.counselorai-faq .faq-item h3 { color: var(--cai-ink); font-size: 1.05rem; font-weight: 600; margin: 0 0 0.5rem 0; }
.counselorai-faq .faq-item p { color: var(--cai-body); font-size: 0.95rem; line-height: 1.6; margin: 0; }

/* Sources */
.counselorai-sources { background: var(--cai-fog); border-left: 3px solid var(--cai-sky); border-radius: 8px; padding: 20px 24px; margin-top: 40px; margin-bottom: 8px; }
.counselorai-sources p { margin: 0 0 10px 0; color: var(--cai-ink); font-family: 'Sora', sans-serif; font-size: 0.95rem; }
.counselorai-sources ul { margin: 0; padding-left: 20px; }
.counselorai-sources li { color: var(--cai-body); font-size: 0.9rem; margin-bottom: 4px; }
.counselorai-sources a { color: var(--cai-ink); text-decoration: none; }
.counselorai-sources a:hover { color: var(--cai-ink); text-decoration: underline; }

/* Category Badge */
.counselorai-cat-badge { margin-bottom: 1rem; }
.counselorai-cat-badge a { background: var(--cai-ink); color: var(--cai-white); font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.75rem; border-radius: 20px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; }

/* Author Bio */
.counselorai-author-bio { display: flex; align-items: flex-start; gap: 24px; background: var(--cai-white); border: 1px solid var(--cai-line); border-radius: 12px; padding: 28px; margin-top: 48px; }
.counselorai-author-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--cai-line); }
.counselorai-author-info { display: flex; flex-direction: column; gap: 8px; }
.counselorai-author-name { font-family: 'Sora', sans-serif; font-size: 1.1rem; font-weight: 600; color: var(--cai-ink); margin: 0; }
.counselorai-author-desc { font-family: 'DM Sans', sans-serif; font-size: 0.95rem; color: var(--cai-body); line-height: 1.6; margin: 0; }
.counselorai-author-linkedin { font-family: 'DM Sans', sans-serif; font-size: 0.9rem; color: var(--cai-ink); text-decoration: none; font-weight: 500; }
.counselorai-author-linkedin:hover { color: var(--cai-ink); }
@media (max-width: 600px) { .counselorai-author-bio { flex-direction: column; align-items: center; text-align: center; } }

/* Ensure bio and sources always visible */
.counselorai-author-bio,
.counselorai-sources,
.counselorai-answer-block,
.counselorai-faq,
.counselorai-comparison-table {
    opacity: 1 !important;
    transform: none !important;
}

/* Legal pages (Privacy, Terms, Subprocessors) */
body.page-template .entry-content p,
body.page-template .entry-content li,
body.page-template .entry-content td,
body.page-template .entry-content .wp-block-paragraph,
body.page-id-3 .entry-content p,
body.page-id-3 .entry-content li,
body.page-id-3 .entry-content td,
body.page-id-117 .entry-content p,
body.page-id-117 .entry-content li,
body.page-id-117 .entry-content td,
body.page-id-125 .entry-content p,
body.page-id-125 .entry-content li,
body.page-id-125 .entry-content td {
    color: var(--cai-body);
}
body.page-id-3 .entry-content a,
body.page-id-117 .entry-content a,
body.page-id-125 .entry-content a {
    color: var(--cai-ink);
}
body.page-id-3 .entry-content a:hover,
body.page-id-117 .entry-content a:hover,
body.page-id-125 .entry-content a:hover {
    color: var(--cai-ink);
}


/* ---------------------------------------------------------------
   Footer — dark, matching the closing band.
   --------------------------------------------------------------- */
.cai-ftr { background: var(--ink); margin: 0 !important; padding: 44px 0; }
.cai-ftr__wrap {
    max-width: 1200px; margin: 0 auto; padding: 0 40px;
    display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center;
    font-family: 'DM Sans', sans-serif; font-size: 13px; color: #9DA1A9;
}
.cai-ftr__links { display: flex; flex-wrap: wrap; gap: 22px; }
.cai-ftr__links a { color: #C3C7CE; text-decoration: none; }
.cai-ftr__links a:hover { color: #fff; text-decoration: underline; }
.cai-ftr__links a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 980px) { .cai-ftr__wrap { padding: 0 24px; } }