/*
Theme Name: WordPress Studio (Kadence Child)
Theme URI: https://github.com/giveitlegs/wordpress-studio
Author: WordPress Studio
Author URI: https://wordpress-studio.local
Description: Unified editorial child theme for the WordPress Studio affiliate portfolio. Built on Kadence free. Editorial magazine aesthetic (Fraunces + Figtree) with per-site accent tokens swapped at deploy time. Optimized for Core Web Vitals, AdSense monetization, and Amazon affiliate conversion.
Version: 0.1.0
Template: kadence
Text Domain: wps-child
Tags: blog, affiliate, seo, monetization, editorial, kadence, two-columns, custom-colors, custom-menu
*/

/* ============================================================
   WordPress Studio — design tokens
   These tokens are the single source of truth. theme.json mirrors them
   for the block editor. Per-site accent colors are swapped at deploy
   time (see theme/palettes.yaml + wordpress_studio/operations/theme_deploy.py).
   ============================================================ */
:root {
    /* Per-site accent (swapped at deploy time) */
    --wps-accent:          #B8541A;
    --wps-accent-soft:     #E8A878;
    --wps-accent-deep:     #6B2E0D;

    /* Editorial neutrals (uniform across portfolio) */
    --wps-bg:              #FAF7F2;
    --wps-bg-alt:          #F2EEE6;
    --wps-surface:         #FFFFFF;
    --wps-ink:             #0F0E0C;
    --wps-ink-soft:        #3C3935;
    --wps-ink-mute:        #6B6762;
    --wps-hairline:        #E8E4DD;
    --wps-hairline-strong: #C9C3B8;
    --wps-sponsored:       #DED7C8;
    --wps-success:         #2D6A4F;

    /* Typography */
    --wps-font-display:    "Fraunces", "Times New Roman", Georgia, serif;
    --wps-font-body:       "Figtree", -apple-system, BlinkMacSystemFont, sans-serif;

    /* Scale */
    --wps-size-xs:         0.75rem;
    --wps-size-sm:         0.875rem;
    --wps-size-base:       1.0625rem;
    --wps-size-lg:         1.1875rem;
    --wps-size-xl:         1.5rem;
    --wps-size-2xl:        2rem;
    --wps-size-3xl:        2.75rem;
    --wps-size-4xl:        3.75rem;
    --wps-size-5xl:        5rem;

    /* Spacing */
    --wps-space-1:         0.25rem;
    --wps-space-2:         0.5rem;
    --wps-space-3:         0.75rem;
    --wps-space-4:         1rem;
    --wps-space-6:         1.5rem;
    --wps-space-8:         2rem;
    --wps-space-12:        3rem;
    --wps-space-16:        4rem;
    --wps-space-24:        6rem;

    /* Layout */
    --wps-max-w:           1240px;
    --wps-measure:         66ch;
}

/* ============================================================
   Base typography overrides for Kadence parent
   ============================================================ */
body.wp-site {
    font-family: var(--wps-font-body);
    font-size: var(--wps-size-base);
    line-height: 1.65;
    color: var(--wps-ink);
    background: var(--wps-bg);
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body h1, body h2, body h3, body h4, body h5, body h6,
.entry-title, .widget-title {
    font-family: var(--wps-font-display) !important;
    font-variation-settings: "opsz" 144;
    letter-spacing: -0.02em;
    color: var(--wps-ink);
}

/* Hero-scale headline */
.wps-hero h1 {
    font-weight: 400;
    font-size: clamp(2.5rem, 5vw, var(--wps-size-5xl));
    line-height: 1.02;
    letter-spacing: -0.035em;
    margin-bottom: var(--wps-space-6);
}
.wps-hero h1 em {
    font-style: italic;
    color: var(--wps-accent-deep);
    font-variation-settings: "opsz" 144, "SOFT" 50;
}

/* Drop cap on article first paragraph */
.single-post .entry-content > p:first-of-type::first-letter,
.wps-article p:first-of-type::first-letter {
    font-family: var(--wps-font-display);
    font-weight: 400;
    font-variation-settings: "opsz" 144;
    float: left;
    font-size: 5.5rem;
    line-height: 0.85;
    padding-right: var(--wps-space-4);
    padding-top: var(--wps-space-2);
    color: var(--wps-accent);
}

/* Article body prose */
.single-post .entry-content p,
.wps-article p {
    font-size: var(--wps-size-lg);
    line-height: 1.75;
    color: var(--wps-ink-soft);
    margin-bottom: var(--wps-space-6);
}

.single-post .entry-content h2,
.wps-article h2 {
    font-weight: 500;
    font-size: var(--wps-size-2xl);
    line-height: 1.15;
    margin: var(--wps-space-12) 0 var(--wps-space-4);
    font-variation-settings: "opsz" 48;
}

/* Pull quote */
.wps-pullquote,
.single-post blockquote {
    font-family: var(--wps-font-display);
    font-style: italic;
    font-weight: 300;
    font-size: var(--wps-size-2xl);
    line-height: 1.35;
    color: var(--wps-ink);
    margin: var(--wps-space-12) 0;
    padding: var(--wps-space-8) 0 var(--wps-space-8) var(--wps-space-8);
    border-left: 2px solid var(--wps-accent);
    font-variation-settings: "opsz" 144;
    letter-spacing: -0.01em;
    background: none;
}

/* Meta labels */
.wps-label,
.cat-links,
.tag-links {
    display: inline-flex;
    align-items: center;
    gap: var(--wps-space-3);
    font-size: var(--wps-size-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--wps-accent);
}
.wps-label::before {
    content: "";
    width: 32px;
    height: 1px;
    background: var(--wps-accent);
}

/* ============================================================
   Disclosure pill (injected above first affiliate link)
   ============================================================ */
.wps-disclosure-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--wps-space-2);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    padding: var(--wps-space-2) var(--wps-space-3);
    background: var(--wps-bg);
    border: 1px solid var(--wps-hairline-strong);
    color: var(--wps-ink-soft);
    margin-bottom: var(--wps-space-6);
}
.wps-disclosure-pill::before {
    content: "⎋";
    color: var(--wps-accent);
    font-weight: 700;
}

/* ============================================================
   Product cards (Content Egg + Amazon)
   ============================================================ */
.wps-product-card,
.content-egg-module {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: var(--wps-space-6);
    align-items: center;
    padding: var(--wps-space-6);
    background: var(--wps-bg);
    border: 1px solid var(--wps-hairline);
    border-left: 3px solid var(--wps-accent);
    margin: var(--wps-space-8) 0;
}
.wps-product-card h4 {
    font-family: var(--wps-font-display);
    font-size: var(--wps-size-lg);
    font-weight: 600;
    color: var(--wps-ink);
    margin-bottom: var(--wps-space-2);
    line-height: 1.2;
}
.wps-product-card p {
    font-size: var(--wps-size-sm);
    color: var(--wps-ink-mute);
    line-height: 1.5;
}
.wps-product-card .rating {
    font-size: var(--wps-size-xs);
    color: var(--wps-accent);
    letter-spacing: 0.08em;
    margin-top: var(--wps-space-2);
    font-weight: 600;
}

.wps-cta,
.wp-block-button__link.wps-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--wps-space-2);
    padding: var(--wps-space-3) var(--wps-space-6);
    background: var(--wps-accent);
    color: var(--wps-bg);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: all 150ms ease;
    border: 1px solid var(--wps-accent);
    border-radius: 0;
    text-decoration: none;
}
.wps-cta:hover,
.wp-block-button__link.wps-cta:hover {
    background: var(--wps-ink);
    border-color: var(--wps-ink);
    color: var(--wps-bg);
}

/* ============================================================
   Ad slot (SPONSORED wrapper for AdSense in-content)
   ============================================================ */
.wps-ad-slot {
    background: var(--wps-bg);
    border: 1px solid var(--wps-hairline);
    padding: var(--wps-space-6);
    margin: var(--wps-space-12) 0;
    text-align: center;
    position: relative;
}
.wps-ad-slot::before {
    content: "SPONSORED";
    position: absolute;
    top: var(--wps-space-2);
    left: var(--wps-space-3);
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    color: var(--wps-ink-mute);
    font-weight: 700;
}
.wps-ad-slot > .adsbygoogle,
.wps-ad-slot > ins {
    display: block;
    min-height: 250px;
}

/* ============================================================
   Author bio
   ============================================================ */
.wps-author-bio {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: var(--wps-space-6);
    align-items: center;
    padding: var(--wps-space-6) 0;
    margin-top: var(--wps-space-16);
    border-top: 2px solid var(--wps-ink);
    border-bottom: 1px solid var(--wps-hairline);
}
.wps-author-bio .avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
}
.wps-author-bio h4 {
    font-size: var(--wps-size-lg);
    font-weight: 600;
    margin-bottom: var(--wps-space-1);
}
.wps-author-bio .author-role {
    font-size: var(--wps-size-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wps-accent);
    font-weight: 600;
    margin-bottom: var(--wps-space-2);
}
.wps-author-bio p {
    font-size: var(--wps-size-sm);
    color: var(--wps-ink-soft);
    line-height: 1.5;
    margin: 0;
}

/* ============================================================
   Pre-footer — inverted editorial section
   ============================================================ */
.wps-pre-footer {
    background: var(--wps-ink);
    color: var(--wps-bg);
    padding: var(--wps-space-16) var(--wps-space-6);
}
.wps-pre-footer .inner { max-width: var(--wps-max-w); margin: 0 auto; }
.wps-pre-footer h3 {
    font-family: var(--wps-font-display);
    font-weight: 300;
    font-size: var(--wps-size-3xl);
    letter-spacing: -0.02em;
    margin-bottom: var(--wps-space-2);
    font-variation-settings: "opsz" 144;
    color: var(--wps-bg);
}
.wps-pre-footer h3 em { font-style: italic; color: var(--wps-accent-soft); }
.wps-pre-footer .section-sub {
    font-size: var(--wps-size-sm);
    color: rgba(250, 247, 242, 0.6);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--wps-space-8);
    padding-bottom: var(--wps-space-4);
    border-bottom: 1px solid rgba(250, 247, 242, 0.15);
}
.wps-popular-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--wps-space-8);
    margin-bottom: var(--wps-space-16);
}
.wps-popular-grid .item {
    border-top: 1px solid rgba(250, 247, 242, 0.15);
    padding-top: var(--wps-space-4);
}
.wps-popular-grid .rank-num {
    font-family: var(--wps-font-display);
    font-size: var(--wps-size-2xl);
    color: var(--wps-accent-soft);
    font-weight: 300;
    font-variation-settings: "opsz" 144;
    margin-bottom: var(--wps-space-2);
}
.wps-popular-grid h4 {
    font-size: var(--wps-size-base);
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: var(--wps-space-2);
    color: var(--wps-bg);
}
.wps-popular-grid .meta {
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(250, 247, 242, 0.5);
    font-weight: 500;
}
.wps-trust-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--wps-space-8);
    padding: var(--wps-space-8) 0;
    border-top: 1px solid rgba(250, 247, 242, 0.15);
    border-bottom: 1px solid rgba(250, 247, 242, 0.15);
}
.wps-trust-strip .num {
    font-family: var(--wps-font-display);
    font-size: var(--wps-size-3xl);
    font-weight: 300;
    color: var(--wps-accent-soft);
    font-variation-settings: "opsz" 144;
    line-height: 1;
}
.wps-trust-strip .label {
    font-size: var(--wps-size-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(250, 247, 242, 0.7);
    font-weight: 500;
}

/* ============================================================
   Footer — 4-col editorial
   ============================================================ */
.site-footer,
.wps-footer {
    background: var(--wps-bg) !important;
    border-top: 2px solid var(--wps-ink);
    padding: var(--wps-space-16) var(--wps-space-6) var(--wps-space-8);
}
.wps-footer .inner { max-width: var(--wps-max-w); margin: 0 auto; }
.wps-footer .grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--wps-space-12);
    padding-bottom: var(--wps-space-12);
    border-bottom: 1px solid var(--wps-hairline);
}
.wps-footer .brand h4 {
    font-family: var(--wps-font-display);
    font-weight: 600;
    font-size: var(--wps-size-xl);
    font-style: italic;
    margin-bottom: var(--wps-space-4);
}
.wps-footer .brand p {
    font-size: var(--wps-size-sm);
    color: var(--wps-ink-soft);
    line-height: 1.65;
    max-width: 36ch;
    margin-bottom: var(--wps-space-6);
}
.wps-footer .brand .disclosure {
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wps-ink-mute);
    padding: var(--wps-space-3);
    border: 1px solid var(--wps-hairline-strong);
    font-weight: 500;
    line-height: 1.4;
}
.wps-footer .col h5 {
    font-size: var(--wps-size-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wps-ink);
    font-weight: 700;
    padding-bottom: var(--wps-space-3);
    margin-bottom: var(--wps-space-4);
    border-bottom: 1px solid var(--wps-ink);
}
.wps-footer .col ul { list-style: none; margin: 0; padding: 0; }
.wps-footer .col li { padding: var(--wps-space-2) 0; }
.wps-footer .col a {
    font-size: var(--wps-size-sm);
    color: var(--wps-ink-soft);
    transition: color 150ms ease;
    text-decoration: none;
}
.wps-footer .col a:hover { color: var(--wps-accent); }
.wps-footer .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--wps-space-6);
    font-size: var(--wps-size-xs);
    color: var(--wps-ink-mute);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 960px) {
    .wps-popular-grid { grid-template-columns: repeat(2, 1fr); }
    .wps-trust-strip { grid-template-columns: repeat(2, 1fr); gap: var(--wps-space-6); }
    .wps-footer .grid { grid-template-columns: 1fr; gap: var(--wps-space-8); }
    .wps-footer .bottom { flex-direction: column; gap: var(--wps-space-4); }
    .wps-product-card { grid-template-columns: 100px 1fr; }
    .wps-product-card .wps-cta { grid-column: 1 / -1; justify-content: center; }
    .single-post .entry-content > p:first-of-type::first-letter { font-size: 4rem; }
}