/*
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:          #2D6A4F;
    --wps-accent-soft:     #95D5B2;
    --wps-accent-deep:     #1B4332;

    /* 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
   — high specificity + !important to beat Kadence's own CSS
   ============================================================ */
html body,
body.wp-site,
body.wp-site .site-container,
body .entry-content,
body .wps-article {
    font-family: var(--wps-font-body) !important;
    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,
body .entry-title, body .widget-title,
body .wp-block-heading,
body .wps-hero h1, body .wps-featured h2 {
    font-family: var(--wps-font-display) !important;
    font-variation-settings: "opsz" 144;
    letter-spacing: -0.02em;
    color: var(--wps-ink);
}

/* Navigation — Kadence uses .header-menu-container + .main-navigation */
body .header-menu-container,
body .header-menu-container a,
body .main-navigation,
body .main-navigation a,
body #primary-menu,
body #primary-menu a,
body .primary-menu-container a,
body nav.main-navigation .menu-item > a,
body .header-menu-container .nav-drop-title-wrap {
    font-family: var(--wps-font-body) !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: var(--wps-ink) !important;
}

body .header-menu-container a:hover,
body .main-navigation a:hover,
body nav.main-navigation .menu-item > a:hover,
body #primary-menu a:hover {
    color: var(--wps-accent) !important;
}

/* Dropdown sub-menu items (also need high contrast) */
body .main-navigation ul.sub-menu,
body .main-navigation ul.sub-menu li a {
    font-family: var(--wps-font-body) !important;
    color: var(--wps-ink) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    background: var(--wps-bg) !important;
}
body .main-navigation ul.sub-menu {
    border: 1px solid var(--wps-hairline-strong) !important;
    box-shadow: 0 8px 24px rgba(15,14,12,0.08) !important;
}
body .main-navigation ul.sub-menu li a:hover {
    background: var(--wps-bg-alt) !important;
    color: var(--wps-accent) !important;
}

/* Site title / logo — always use display font */
body .site-branding .site-title,
body .site-branding a.brand,
body .site-title a {
    font-family: var(--wps-font-display) !important;
    font-style: italic;
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* ============================================================
   Header — constrain logo, hide redundant site title text,
   left-align branding, trim vertical padding
   ============================================================ */

/* Constrain the custom logo image to a sensible header height */
body .site-header .custom-logo,
body .site-header .brand .custom-logo,
body .site-branding a.brand img {
    max-height: 56px !important;
    width: auto !important;
    height: auto !important;
    max-width: 260px !important;
    object-fit: contain;
}

/* Hide the site-title paragraph — the logo image is enough */
body .site-title-wrap,
body .site-header .site-title,
body p.site-title {
    display: none !important;
}

/* Left-align branding + reduce header vertical padding */
body .site-header-main-section-left-center,
body .site-branding,
body .site-header .header-main-left,
body .site-branding.title-tagline-hidden {
    text-align: left !important;
    justify-content: flex-start !important;
}
body .site-branding a.brand {
    justify-content: flex-start !important;
    display: inline-flex !important;
    align-items: center;
}
body .site-header-main-inner-wrap,
body .site-header-inner {
    min-height: 72px;
    padding-top: var(--wps-space-2);
    padding-bottom: var(--wps-space-2);
}

/* Push nav to the right */
body .site-header .header-main-right {
    justify-content: flex-end;
}

/* ============================================================
   Hide Kadence's default .entry-hero block on the front page
   — our composed homepage has its own hero section
   ============================================================ */
body.home .entry-hero,
body.page-id-14985 .entry-hero,
body.page-id-14985 .entry-header,
body.home > .entry-hero {
    display: none !important;
}

/* Give our hero breathing room on the front page */
body.home .content-area,
body.home #main {
    padding-top: 0;
}
body.home .wps-hero {
    padding-top: var(--wps-space-24) !important;
}
body.home .wps-hero h1 {
    font-size: clamp(2.5rem, 5vw, 5rem) !important;
    font-weight: 400 !important;
    line-height: 1.02 !important;
    letter-spacing: -0.035em !important;
    max-width: 18ch;
}
body.home .wps-hero h1 em {
    font-style: italic;
    color: var(--wps-accent-deep);
}

/* 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
   ============================================================ */
/* ============================================================
   Article wrapper — prevents cascade conflicts from .entry-content
   ============================================================ */
.wps-article {
    max-width: var(--wps-measure);
    margin: 0;
    padding: 0;
}

/* ============================================================
   TOC sidebar — sticky left rail on single posts
   ============================================================ */
.single-post .entry-content-wrap {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--wps-space-12);
    max-width: var(--wps-max-w);
}
.wps-toc-sidebar {
    grid-column: 1;
    grid-row: 1 / span 99;
}
.wps-toc-sidebar .toc {
    position: sticky;
    top: 120px;
}
.wps-toc-sidebar .toc-label {
    font-size: var(--wps-size-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--wps-ink);
    padding-bottom: var(--wps-space-3);
    margin-bottom: var(--wps-space-4);
    border-bottom: 1px solid var(--wps-ink);
}
.wps-toc-sidebar ol {
    list-style: none;
    counter-reset: toc;
    padding: 0;
    margin: 0;
}
.wps-toc-sidebar li {
    counter-increment: toc;
    font-size: var(--wps-size-sm);
    line-height: 1.5;
    padding: var(--wps-space-2) 0;
    border-bottom: 1px solid var(--wps-hairline);
}
.wps-toc-sidebar li::before {
    content: counter(toc, decimal-leading-zero);
    display: inline-block;
    width: 2em;
    font-weight: 600;
    color: var(--wps-accent);
    font-variant-numeric: tabular-nums;
}
.wps-toc-sidebar a {
    color: var(--wps-ink-mute);
    text-decoration: none;
}
.wps-toc-sidebar a:hover { color: var(--wps-ink); }

/* ============================================================
   Mobile
   ============================================================ */
/* Tablet (max 960px) */
@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: repeat(2, 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; }
    .wps-article p:first-of-type::first-letter { font-size: 4rem; }
    .single-post .entry-content-wrap { grid-template-columns: 1fr; }
    .wps-toc-sidebar { position: static; }
    .wps-toc-sidebar .toc { position: static; margin-bottom: var(--wps-space-8); }
}

/* Small tablet (max 768px) */
@media (max-width: 768px) {
    .wps-footer .grid { grid-template-columns: 1fr; gap: var(--wps-space-6); }
}

/* Phone (max 480px) */
@media (max-width: 480px) {
    .wps-popular-grid { grid-template-columns: 1fr; }
    .wps-trust-strip { grid-template-columns: 1fr; }
    .single-post .entry-content > p:first-of-type::first-letter,
    .wps-article p:first-of-type::first-letter {
        font-size: 2.5rem;
        padding-right: var(--wps-space-2);
    }
    .wps-product-card { grid-template-columns: 1fr; }
    .wps-author-bio { grid-template-columns: 1fr; text-align: center; }
    .wps-author-bio .avatar,
    .wps-author-bio > div:first-child { justify-self: center; }
    .wps-hero h1 { font-size: 2rem; }
}