/*
Theme Name: Affvidco Child
Theme URI: https://vidcogroup.com/
Description: Child theme for Affvidco Theme. Reviews Took look: ink-cyan and magenta on cool slate.
Author: Vidco Team
Author URI: https://vidcogroup.com/
Template: affvidco
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: affiliatecms-child
*/

/* ==========================================================================
   Reviews Took — Ink palette
   Override parent design tokens. The stylesheet is enqueued AFTER the parent
   (see functions.php), so plain selectors are enough.
   ========================================================================== */

:root {
    /* Primary — Ink Cyan */
    --color-primary: #0E7490;
    --color-primary-hover: #155E75;
    --color-primary-dark: #164E63;
    --color-primary-light: #ECFEFF;
    --color-primary-rgb: 14, 116, 144;

    /* Accent — Magenta (the "M" in CMYK) */
    --color-accent: #DB2777;
    --color-accent-hover: #BE185D;
    --color-accent-light: #FCE7F3;

    /* Neutrals — Cool slate */
    --color-text: #0F172A;
    --color-text-secondary: #334155;
    --color-text-muted: #64748B;
    --color-text-subtle: #94A3B8;

    /* Surfaces */
    --color-bg: #F8FAFC;
    --color-bg-alt: #F1F5F9;
    --color-surface: #FFFFFF;
    --color-surface-raised: #FFFFFF;
    --color-surface-hover: #F1F5F9;

    /* Borders */
    --color-border: #E2E8F0;
    --color-border-subtle: #EDF2F7;
    --color-border-strong: #CBD5E1;

    /* Overlay */
    --color-overlay: rgba(15, 23, 42, 0.55);

    /* Colored shadows */
    --shadow-primary: 0 4px 14px rgba(14, 116, 144, 0.24);
    --shadow-accent: 0 4px 14px rgba(219, 39, 119, 0.22);

    /* Slightly rounder than the editorial default */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.625rem;
    --radius-xl: 0.875rem;
    --radius-2xl: 1.125rem;
    --radius-3xl: 1.5rem;

    /* Type — one family; headings are heavier Inter (no extra font download) */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

[data-theme="dark"] {
    --color-primary: #22D3EE;
    --color-primary-hover: #67E8F9;
    --color-primary-dark: #06B6D4;
    --color-primary-light: rgba(34, 211, 238, 0.14);
    --color-primary-rgb: 34, 211, 238;

    --color-accent: #F472B6;
    --color-accent-hover: #F9A8D4;
    --color-accent-light: rgba(244, 114, 182, 0.15);

    --color-text: #F1F5F9;
    --color-text-secondary: #CBD5E1;
    --color-text-muted: #94A3B8;
    --color-text-subtle: #64748B;

    --color-bg: #0B1220;
    --color-bg-alt: #101A2C;
    --color-surface: #152033;
    --color-surface-raised: #1B2840;
    --color-surface-hover: #223250;

    --color-border: #2A3A57;
    --color-border-subtle: #1E2C46;
    --color-border-strong: #3A4E73;

    --shadow-primary: 0 4px 14px rgba(34, 211, 238, 0.26);
    --shadow-accent: 0 4px 14px rgba(244, 114, 182, 0.26);
}

/* ==========================================================================
   Headings
   ========================================================================== */

h1, h2, h3,
.site-title,
.entry-title,
.page-title {
    font-family: var(--font-sans);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.btn-primary,
.button-primary,
button.acms-btn-primary {
    background-image: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border: 0;
}

.btn-primary:hover,
.button-primary:hover,
button.acms-btn-primary:hover {
    background-image: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary-dark) 100%);
    transform: translateY(-1px);
}

hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(90deg, transparent, var(--color-border-strong) 50%, transparent);
}

/* ==========================================================================
   Logo wordmark
   ========================================================================== */

.rt-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--color-text);
    flex-shrink: 0;
    white-space: nowrap;
}

.rt-logo__icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

.rt-logo__text {
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: -0.03em;
    line-height: 1;
}

.rt-logo__text span {
    color: var(--color-accent);
}

/* ==========================================================================
   Header: keep logo, menu and actions on one line at tablet widths
   ========================================================================== */

.header__logo {
    flex-shrink: 0;
}

.header__nav {
    min-width: 0;
}

@media (min-width: 769px) and (max-width: 1180px) {
    .header__cta {
        display: none;
    }

    .header__menu > li > a {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }

    .rt-logo__text {
        font-size: 1.1rem;
    }
}

/* ==========================================================================
   Homepage: printer spotlight block
   ========================================================================== */

.rt-spotlight {
    padding: 2.5rem 0 1rem;
}

.rt-spotlight__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.rt-spotlight__title {
    margin: 0;
    font-size: 1.5rem;
}

.rt-spotlight__sub {
    margin: 0.25rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.rt-spotlight__more {
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
}

.rt-spotlight__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.rt-spotlight__card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.1rem 1.2rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--color-text);
    transition: transform .15s ease, box-shadow .15s ease;
}

.rt-spotlight__card:nth-child(2) { border-top-color: var(--color-accent); }
.rt-spotlight__card:nth-child(3) { border-top-color: #CA8A04; }
.rt-spotlight__card:nth-child(4) { border-top-color: var(--color-text); }

.rt-spotlight__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

.rt-spotlight__card strong {
    font-size: 1rem;
    line-height: 1.35;
}

.rt-spotlight__card time {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

@media (max-width: 1024px) {
    .rt-spotlight__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .rt-spotlight__grid { grid-template-columns: 1fr; }
    .rt-spotlight__head { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Posts without a featured image: branded block instead of the grey icon
   ========================================================================== */

.featured-card__placeholder {
    position: relative;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: transparent;
    font-size: 0;
    overflow: hidden;
}

.featured-card__placeholder::before {
    content: "";
    position: absolute;
    top: -20%;
    right: -8%;
    width: 52%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
}

.featured-card__placeholder::after {
    content: "ReviewsTook";
    position: absolute;
    top: 1.1rem;
    right: 1.25rem;
    font: 800 1rem/1 var(--font-sans);
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] .featured-card__placeholder {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-bg-alt) 100%);
}