/*
Theme Name: Affvidco Child
Theme URI: https://vidcogroup.com/
Description: Child theme for Affvidco Theme. BestUSProducts brand palette: navy blue + red on cool slate.
Author: Vidco Team
Author URI: https://vidcogroup.com/
Template: affvidco
Version: 1.1.2
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
*/

/* ==========================================================================
   Affvidco Child — Editorial Indigo Theme
   Override parent design tokens. Higher specificity not needed since the
   stylesheet is enqueued AFTER the parent (see functions.php).
   ========================================================================== */

:root {
    /* Primary — BestUSProducts Navy Blue (from logo) */
    --color-primary: #0F3D91;
    --color-primary-hover: #0B2F72;
    --color-primary-dark: #0A1A3F;
    --color-primary-light: #E8EEFA;
    --color-primary-rgb: 15, 61, 145;

    /* Accent — BestUSProducts Red (from logo) */
    --color-accent: #E3262F;
    --color-accent-hover: #C21C25;
    --color-accent-light: #FDECEC;

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

    /* Surfaces — Cool off-white with subtle blue undertone */
    --color-bg: #F8FAFC;
    --color-bg-alt: #F1F5F9;
    --color-surface: #FFFFFF;
    --color-surface-raised: #FFFFFF;
    --color-surface-hover: #F1F5F9;

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

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

    /* Colored Shadows — Navy + Red tint */
    --shadow-primary: 0 4px 14px rgba(15, 61, 145, 0.22);
    --shadow-accent: 0 4px 14px rgba(227, 38, 47, 0.22);

    /* Tighter, editorial radii (parent feels softer) */
    --radius-sm: 0.125rem;  /* 2px */
    --radius-md: 0.25rem;   /* 4px */
    --radius-lg: 0.375rem;  /* 6px */
    --radius-xl: 0.5rem;    /* 8px */
    --radius-2xl: 0.75rem;  /* 12px */
    --radius-3xl: 1rem;     /* 16px */

    /* Editorial type — serif headings for differentiation */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* Dark mode — Deep navy night */
[data-theme="dark"] {
    --color-primary: #6E9BFF;
    --color-primary-hover: #93B4FF;
    --color-primary-dark: #3B6FE0;
    --color-primary-light: rgba(110, 155, 255, 0.15);
    --color-primary-rgb: 110, 155, 255;

    --color-accent: #FF5A62;
    --color-accent-hover: #FF7A80;
    --color-accent-light: rgba(255, 90, 98, 0.15);

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

    --color-bg: #0A1124;
    --color-bg-alt: #0E1730;
    --color-surface: #13203F;
    --color-surface-raised: #1A2A52;
    --color-surface-hover: #203260;

    --color-border: #263763;
    --color-border-subtle: #1B294D;
    --color-border-strong: #34497F;

    --shadow-primary: 0 4px 14px rgba(110, 155, 255, 0.3);
    --shadow-accent: 0 4px 14px rgba(255, 90, 98, 0.28);
}

/* ==========================================================================
   Editorial Headings — Serif for h1-h3, sans for body
   Single load of Playfair Display from Google Fonts
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&display=swap');

h1, h2, h3,
.site-title,
.entry-title,
.page-title {
    font-family: var(--font-serif);
    letter-spacing: var(--tracking-tight);
}

/* Subtle gradient underline on primary buttons for an editorial accent */
.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);
}

/* Hairline divider style — editorial magazine feel */
hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(90deg, transparent, var(--color-border-strong) 50%, transparent);
}


/* ==========================================================================
   BestUSProducts brand overrides — replace parent's hardcoded teal/coral tints
   ========================================================================== */
.page-header__gradient{background:linear-gradient(135deg,rgba(15,61,145,.12),rgba(15,61,145,.06) 25%,transparent 50%,rgba(227,38,47,.06) 75%,rgba(227,38,47,.12))}
.post-hero__gradient,.contact-hero__gradient{background:linear-gradient(135deg,rgba(15,61,145,.2),rgba(15,61,145,.1) 25%,transparent 50%,rgba(227,38,47,.1) 75%,rgba(227,38,47,.2))}
.newsletter-widget,.cta-widget{background:linear-gradient(135deg,rgba(15,61,145,.07),transparent 50%,rgba(227,38,47,.05))}
.mobile-nav__header{background:linear-gradient(135deg,rgba(15,61,145,.06),transparent 60%)}
.comment-showcase--centered:hover .comment-showcase__score-ring{box-shadow:0 12px 40px rgba(15,61,145,.4),0 0 0 6px rgba(15,61,145,.15),inset 0 0 30px hsla(0,0%,100%,.15)}
.comment-showcase__score-ring:after{background:radial-gradient(circle,rgba(15,61,145,.15) 0,transparent 70%)}
.comment__badge-admin i{filter:drop-shadow(0 1px 2px rgba(15,61,145,.3))}

/* Dark mode logo (white text version) */
[data-theme="dark"] img.custom-logo{content:url("/wp-content/uploads/2026/10/bestusproducts-logo-dark.png")}

/* Easy Table of Contents — follow theme colors (light + dark) */
#ez-toc-container{background:var(--color-surface)!important;border:1px solid var(--color-border)!important;border-radius:var(--radius-lg)}
#ez-toc-container .ez-toc-title,#ez-toc-container p.ez-toc-title{color:var(--color-text)!important}
#ez-toc-container a,#ez-toc-container a:visited{color:var(--color-primary)!important}
#ez-toc-container a:hover{color:var(--color-accent)!important}

/* Header menu: fit 7 department links */
@media (min-width:1280px){.site-header .container{max-width:1280px}}
.header__menu > li > a{padding-left:9px;padding-right:9px}

/* Hide "Today's Deals" buttons until a Deals page exists (they link to #) */
.header__cta,.mobile-nav__cta{display:none!important}

/* Mobile nav search button: use a search icon instead of the robot icon */
.mobile-nav__ai-btn .bi-robot::before{content:"\F52A"}

/* Article components: pros/cons boxes + Amazon button */
.bup-proscons{display:grid;grid-template-columns:1fr;gap:14px;margin:16px 0}
@media (min-width:640px){.bup-proscons{grid-template-columns:1fr 1fr}}
.bup-proscons>div{border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:14px 16px;background:var(--color-surface)}
.bup-proscons>div:first-child{border-top:4px solid #16a34a}
.bup-proscons>div:last-child{border-top:4px solid var(--color-accent)}
.bup-proscons ul{margin:8px 0 0;padding-left:18px}
.bup-proscons li{margin:4px 0}
a.bup-btn{display:inline-block;background:var(--color-accent);color:#fff!important;font-weight:700;padding:11px 20px;border-radius:var(--radius-md);text-decoration:none!important}
a.bup-btn:hover{background:var(--color-accent-hover)}

/* Review layout: top 3 cards, compare table, product block, specs, disclosure */
.bup-top3{display:grid;grid-template-columns:1fr;gap:16px;margin:18px 0}
@media (min-width:768px){.bup-top3{grid-template-columns:repeat(3,1fr)}}
.bup-top3__card{position:relative;border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:18px 16px;background:var(--color-surface);text-align:center;display:flex;flex-direction:column;align-items:center}
.bup-top3__card img{max-width:180px;height:auto;margin:14px auto 8px;object-fit:contain}
.bup-top3__card h3{font-family:var(--font-sans)!important;font-size:17px!important;margin:6px 0!important;line-height:1.35}
.bup-top3__card ul{text-align:left;margin:6px 0 14px;padding-left:18px;font-size:14px;flex:1}
.bup-badge{display:inline-block;background:var(--color-primary);color:#fff;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.bup-top3__card:first-child{border:2px solid var(--color-accent)}
.bup-top3__card:first-child .bup-badge{background:var(--color-accent)}
.bup-compare td{vertical-align:middle}
.bup-compare td:nth-child(2){min-width:150px}
.bup-compare img{width:80px;height:80px;object-fit:contain;display:block;margin-bottom:4px}
.bup-compare ul{margin:0;padding-left:16px;font-size:14px}
.bup-compare .bup-btn{white-space:nowrap;padding:9px 14px;font-size:14px}
.bup-label{display:inline-block;background:var(--color-primary-light);color:var(--color-primary);font-weight:700;font-size:14px;padding:4px 12px;border-radius:999px;margin:0 0 12px}
.bup-product{display:grid;grid-template-columns:1fr;gap:20px;align-items:start;margin:8px 0 18px}
@media (min-width:768px){.bup-product{grid-template-columns:240px 1fr}}
.bup-product__img{display:block;border:1px solid var(--color-border);border-radius:var(--radius-xl);background:#fff;padding:12px;text-align:center}
.bup-product__img img{width:100%;max-width:240px;height:auto;object-fit:contain}
.bup-product__info .bup-proscons{margin-top:0}
.bup-specs{list-style:none;padding:12px 14px!important;margin:12px 0 16px!important;background:var(--color-bg-alt);border-radius:var(--radius-lg);font-size:14px}
.bup-specs li{padding:4px 0;border-bottom:1px dashed var(--color-border)}
.bup-specs li:last-child{border-bottom:0}
.bup-disclosure{font-size:13px;color:var(--color-text-muted);font-style:italic;margin:10px 0 28px}
.bup-verdict{border:1px solid var(--color-border);border-left:4px solid var(--color-accent);border-radius:var(--radius-lg);padding:8px 16px;background:var(--color-surface)}
.bup-verdict p{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:10px 0}

/* Hide theme external-link icon on product images/buttons; uniform image heights */
.bup-top3 a::after,.bup-product__img::after,.bup-compare a::after,a.bup-btn::after,.bup-verdict a::after{display:none!important;content:none!important}
.bup-top3__card img{height:200px;width:auto;max-width:100%}
.bup-product__img img{height:240px;width:auto;max-width:100%}

/* Neutralize empty paragraphs added by the editor inside review components */
.bup-product>p,.bup-top3__card>p:empty,.bup-top3>p,.bup-proscons>p{display:none}
.bup-product__info>p{margin:0}