/*
Theme Name: Proverbs Two:Six Child
Theme URI: https://proverbstwosix.com
Template: kadence
Author: Jehu Campos
Author URI: https://proverbstwosix.com
Description: Child theme for proverbstwosix.com. Implements the Proverbs Two:Six v0.3 design system on top of Kadence: master chrome (Ocean Blue, Forest Green, Source Serif 4 + Source Sans 3) with per-course sub-brand accent tokens. Light/dark mode built in with system-preference default.
Version: 0.1.2
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: proverbstwosix-child
*/

/* ============================================================
   PROVERBS TWO:SIX DESIGN SYSTEM v0.3 — DESIGN TOKENS
   ============================================================ */

:root {
    /* === Brand colors (light mode) === */
    --p2s-primary:    #0891B2;
    --p2s-secondary:  #059669;
    --p2s-ink:        #0F2D33;
    --p2s-slate:      #5A6F75;
    --p2s-paper:      #F4F7F8;
    --p2s-line:       #E1E8EB;
    --p2s-cream:      #FBF8F3;
    --p2s-surface:    #FFFFFF;
    --p2s-text-on-primary: #FFFFFF;

    /* === Default course accents (overridden per-course via [data-course]) === */
    --p2s-accent-1: var(--p2s-secondary);
    --p2s-accent-2: var(--p2s-primary);
    --p2s-accent-3: var(--p2s-secondary);

    /* === Typography === */
    --p2s-font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --p2s-font-sans:  'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --p2s-text-h1:    44px;
    --p2s-text-h2:    32px;
    --p2s-text-h3:    22px;
    --p2s-text-h4:    18px;
    --p2s-text-body:  17px;
    --p2s-text-small: 14px;

    /* === Spacing (8-point grid) === */
    --p2s-space-1:  4px;
    --p2s-space-2:  8px;
    --p2s-space-3:  12px;
    --p2s-space-4:  16px;
    --p2s-space-5:  24px;
    --p2s-space-6:  32px;
    --p2s-space-7:  48px;
    --p2s-space-8:  64px;
    --p2s-space-9:  96px;

    /* === Radius === */
    --p2s-radius-sm:   6px;
    --p2s-radius-md:   12px;
    --p2s-radius-lg:   20px;
    --p2s-radius-full: 999px;
}

/* Dark mode via system preference, unless user explicitly chose light */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --p2s-primary:   #4EC3E0;
        --p2s-secondary: #34C789;
        --p2s-ink:       #E6EFF1;
        --p2s-slate:     #94A8AE;
        --p2s-paper:     #1A2F37;
        --p2s-line:      #2A3F47;
        --p2s-cream:     #1F2A2D;
        --p2s-surface:   #0A1A1F;
        --p2s-text-on-primary: #042530;
    }
}

/* Dark mode via explicit user override */
:root[data-theme="dark"] {
    --p2s-primary:   #4EC3E0;
    --p2s-secondary: #34C789;
    --p2s-ink:       #E6EFF1;
    --p2s-slate:     #94A8AE;
    --p2s-paper:     #1A2F37;
    --p2s-line:      #2A3F47;
    --p2s-cream:     #1F2A2D;
    --p2s-surface:   #0A1A1F;
    --p2s-text-on-primary: #042530;
}

/* ============================================================
   BASE TYPOGRAPHY
   ============================================================ */

body {
    font-family: var(--p2s-font-sans);
    font-size: var(--p2s-text-body);
    line-height: 1.65;
    color: var(--p2s-ink);
    background: var(--p2s-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .site-title,
.wp-block-heading {
    font-family: var(--p2s-font-serif);
    color: var(--p2s-ink);
    line-height: 1.2;
    letter-spacing: -0.005em;
    margin-top: 0;
}

h1, .entry-title { font-size: var(--p2s-text-h1); font-weight: 700; line-height: 1.15; }
h2 { font-size: var(--p2s-text-h2); font-weight: 700; }
h3 { font-size: var(--p2s-text-h3); font-weight: 600; line-height: 1.3; }
h4 { font-size: var(--p2s-text-h4); font-weight: 600; line-height: 1.4; }

p { line-height: 1.65; }

.text-small, small { font-size: var(--p2s-text-small); }
.text-muted { color: var(--p2s-slate); }

/* Links */
a {
    color: var(--p2s-primary);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    text-decoration-thickness: 1px;
    transition: text-decoration-thickness 0.15s ease;
}
a:hover { text-decoration-thickness: 2px; }
a:visited { color: var(--p2s-primary); }

/* ============================================================
   BUTTONS
   ============================================================ */

.p2s-btn,
.wp-block-button__link {
    display: inline-block;
    padding: 12px 24px;
    border-radius: var(--p2s-radius-md);
    font-family: var(--p2s-font-sans);
    font-size: var(--p2s-text-body);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: filter 0.15s ease, background-color 0.15s ease;
}
.p2s-btn:hover,
.wp-block-button__link:hover { filter: brightness(0.92); text-decoration: none; }

.p2s-btn-primary,
.wp-block-button__link {
    background: var(--p2s-primary);
    color: var(--p2s-text-on-primary);
}

.p2s-btn-secondary {
    background: var(--p2s-secondary);
    color: var(--p2s-text-on-primary);
}

.p2s-btn-outline {
    background: transparent;
    color: var(--p2s-primary);
    border: 1.5px solid var(--p2s-primary);
}

/* ============================================================
   SECTION HELPERS
   ============================================================ */

.p2s-section-paper { background: var(--p2s-paper); }
.p2s-section-cream { background: var(--p2s-cream); }

/* ============================================================
   THEME TOGGLE BUTTON
   ============================================================ */

.p2s-theme-toggle {
    background: transparent;
    border: 1px solid var(--p2s-line);
    border-radius: var(--p2s-radius-full);
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--p2s-ink);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.p2s-theme-toggle:hover {
    border-color: var(--p2s-primary);
    background: var(--p2s-paper);
}
.p2s-theme-toggle-icon {
    font-size: 18px;
    line-height: 1;
}

/* ============================================================
   COURSE SUB-BRAND OVERRIDE PATTERN
   ============================================================
   A course page template sets [data-course="<slug>"] on a wrapping
   element. The accent tokens cascade through everything inside.
   Add new courses by appending another block here.
*/

[data-course="lingua-viva"] {
    --p2s-accent-1: #2D9B6F;
    --p2s-accent-2: #C0622A;
    --p2s-accent-3: #5B3FAE;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) [data-course="lingua-viva"] {
        --p2s-accent-1: #56C899;
        --p2s-accent-2: #E89464;
        --p2s-accent-3: #9786DD;
    }
}
:root[data-theme="dark"] [data-course="lingua-viva"] {
    --p2s-accent-1: #56C899;
    --p2s-accent-2: #E89464;
    --p2s-accent-3: #9786DD;
}

/* ============================================================
   v0.1.1 PATCH — Kadence specificity fixes
   ============================================================ */

/*
 * Override Kadence's palette variables with our design tokens.
 * Kadence applies these via --global-palette* throughout its CSS,
 * so writing them at :root scope cascades our colors through
 * every Kadence-styled element automatically.
 *
 * Mapping (Kadence -> P2:6):
 *   palette3  -> ink (h1-h3 color)
 *   palette4  -> ink (body text)
 *   palette5  -> primary (links, buttons in Kadence)
 *   palette8  -> surface (body bg)
 *   palette9  -> surface (content bg)
 */
:root {
    --global-palette3: var(--p2s-ink);
    --global-palette4: var(--p2s-ink);
    --global-palette5: var(--p2s-primary);
    --global-palette8: var(--p2s-surface);
    --global-palette9: var(--p2s-surface);
}

/*
 * Specificity bumps where Kadence wins on bare-element rules.
 * We mirror Kadence's selector strength precisely.
 */
.wp-site-blocks h1, .wp-site-blocks h2, .wp-site-blocks h3,
.wp-site-blocks h4, .wp-site-blocks h5, .wp-site-blocks h6,
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 {
    font-family: var(--p2s-font-serif);
    color: var(--p2s-ink);
    line-height: 1.2;
    letter-spacing: -0.005em;
}

.wp-site-blocks h1, .entry-content h1, .entry-title { font-size: var(--p2s-text-h1); font-weight: 700; line-height: 1.15; }
.wp-site-blocks h2, .entry-content h2 { font-size: var(--p2s-text-h2); font-weight: 700; }
.wp-site-blocks h3, .entry-content h3 { font-size: var(--p2s-text-h3); font-weight: 600; line-height: 1.3; }
.wp-site-blocks h4, .entry-content h4 { font-size: var(--p2s-text-h4); font-weight: 600; line-height: 1.4; }

/*
 * Hero entry area (page title bar). Kadence sets its own bg here;
 * make it transparent so the master surface color shows through.
 */
.entry-hero {
    background: var(--p2s-surface);
}
.entry-hero .entry-title {
    color: var(--p2s-ink);
}

/* ============================================================
   Course card pattern — replaces inline styles
   ============================================================ */

/*
 * Two utility classes that course/feature cards on the home page
 * (and elsewhere) can use instead of inline backgrounds. They use
 * design tokens and are dark-mode aware automatically.
 */
.p2s-card {
    padding: var(--p2s-space-6) var(--p2s-space-6);
    border-radius: var(--p2s-radius-lg);
    background: var(--p2s-paper);
    border: 1px solid var(--p2s-line);
}

.p2s-card-accent-primary   { background: var(--p2s-paper); border-left: 4px solid var(--p2s-primary); }
.p2s-card-accent-secondary { background: var(--p2s-paper); border-left: 4px solid var(--p2s-secondary); }

.p2s-card h2,
.p2s-card h3 {
    color: var(--p2s-ink);
    margin-bottom: var(--p2s-space-4);
}

/* ============================================================
   v0.1.2 PATCH — body, site header, and hero band backgrounds
   ============================================================ */

/*
 * v0.1.1 successfully remapped --global-palette8 to our surface token,
 * but Kadence's inline kadence-global-inline-css block resolves
 * var(--global-palette8) in body{background:...} earlier in the cascade.
 * Whether due to scope or load order, the body background continued to
 * render the original Kadence palette8 value in dark mode.
 *
 * Direct fix: paint body, the site header, and the hero section
 * explicitly with our token. These selectors match Kadence's
 * specificity cleanly without !important.
 */

body,
body.wp-singular,
body.page {
    background: var(--p2s-surface);
}

/* Site header bar (logo + nav) */
#masthead,
.site-header,
.site-header-wrap,
.site-header-inner-wrap-row {
    background: var(--p2s-surface);
    color: var(--p2s-ink);
}

/* Hero section (page title band) */
.entry-hero,
.entry-hero-container-inner,
.page-hero-section {
    background: var(--p2s-surface);
}

/* Site title text in the header */
.site-branding .site-title,
.site-branding .site-title a,
.site-branding-title-inner a {
    color: var(--p2s-ink);
}

/* Primary navigation menu items */
.main-navigation .primary-menu-container > ul > li.menu-item > a {
    color: var(--p2s-ink);
}
.main-navigation .primary-menu-container > ul > li.menu-item > a:hover {
    color: var(--p2s-primary);
}