/*
Theme Name: WikiPatio Child
Theme URI: https://wikipatio.com/
Description: WikiPatio child theme for AffiliateCMS Theme. Outdoor living palette (garden green, cream, teak wood) applied through the parent theme's design tokens.
Author: WikiPatio
Author URI: https://wikipatio.com/
Template: affiliateCMS-theme
Version: 1.0.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
*/

/* ==========================================================================
   WikiPatio color tokens
   Single centralized token set. It only overrides the parent theme's own
   variable names (assets/css/core/tokens.css), so every parent component picks
   the palette up without any per-component rules.
   Palette: garden green (primary), teak wood (accent), warm cream (surfaces).
   Contrast checked against WCAG AA (4.5:1 for text) for both modes.
   ========================================================================== */

:root {
    /* Primary: garden green */
    --color-primary: #2F6B3F;
    --color-primary-hover: #245431;
    --color-primary-dark: #1A3F25;
    --color-primary-light: #E9F3EA;
    --color-primary-rgb: 47, 107, 63;

    /* Accent: teak wood */
    --color-accent: #9A6232;
    --color-accent-hover: #7F4F27;
    --color-accent-light: #F6EDE2;

    /* Text */
    --color-text: #1F2A22;
    --color-text-secondary: #48534B;
    --color-text-muted: #66706A;
    --color-text-subtle: #98A09A;

    /* Surfaces: warm cream */
    --color-bg: #FAF6EC;
    --color-bg-alt: #F3EDDD;
    --color-surface: #FFFFFF;
    --color-surface-raised: #FFFFFF;
    --color-surface-hover: #F8F3E6;

    /* Borders */
    --color-border: #E4DCC8;
    --color-border-subtle: #EDE6D4;
    --color-border-strong: #D3C9AF;
}

[data-theme="dark"] {
    --color-primary: #6FBF86;
    --color-primary-hover: #56A86F;
    --color-primary-dark: #3E8A55;
    --color-primary-light: rgba(111, 191, 134, 0.15);
    --color-primary-rgb: 111, 191, 134;

    --color-accent: #D9A066;
    --color-accent-hover: #C48A50;
    --color-accent-light: rgba(217, 160, 102, 0.15);

    --color-text: #F2F5EF;
    --color-text-secondary: #D3DAD0;
    --color-text-muted: #A3AEA3;
    --color-text-subtle: #7A867B;

    --color-bg: #0F1511;
    --color-bg-alt: #141C17;
    --color-surface: #1A231D;
    --color-surface-raised: #212C25;
    --color-surface-hover: #26322A;

    --color-border: #2C3A31;
    --color-border-subtle: #232E27;
    --color-border-strong: #3B4C40;
}

/* ==========================================================================
   WikiPatio components
   Uses only the parent's design tokens. Breakpoints follow the site checks:
   1080px, 760px, 480px.
   ========================================================================== */

/* ---- Home: hero ---- */
.patio-hero {
    padding: var(--space-16) 0 var(--space-14);
    text-align: center;
    background:
        radial-gradient(60rem 24rem at 15% 0%, var(--color-primary-light), transparent 70%),
        radial-gradient(50rem 22rem at 95% 10%, var(--color-accent-light), transparent 70%),
        var(--color-bg);
    border-bottom: 1px solid var(--color-border-subtle);
}

.patio-hero__eyebrow {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.patio-hero__title {
    max-width: 22ch;
    margin: 0 auto var(--space-4);
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.1;
    color: var(--color-text);
}

.patio-hero__lead {
    max-width: 44rem;
    margin: 0 auto var(--space-8);
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
}

.patio-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
}

/* ---- Home: generic section ---- */
.patio-section--alt {
    background: var(--color-bg-alt);
}

.patio-section__head {
    max-width: 40rem;
    margin: 0 auto var(--space-10);
    text-align: center;
}

.patio-section__title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-3xl);
    color: var(--color-text);
}

.patio-section__subtitle {
    margin: 0;
    color: var(--color-text-muted);
}

.patio-empty {
    max-width: 40rem;
    margin: 0 auto;
    padding: var(--space-6);
    text-align: center;
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
}

/* ---- Home: category cards ---- */
.patio-cats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

.patio-cat {
    display: flex;
    flex-direction: column;
    padding: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.patio-cat:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.patio-cat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: var(--space-4);
    font-size: var(--text-xl);
    color: var(--color-primary);
    background: var(--color-primary-light);
    border-radius: var(--radius-lg);
}

.patio-cat__title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-xl);
}

.patio-cat__title a {
    color: var(--color-text);
    text-decoration: none;
}

.patio-cat__title a:hover {
    color: var(--color-primary);
}

.patio-cat__desc {
    margin: 0 0 var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.patio-cat__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: auto 0 0;
    padding: 0;
    list-style: none;
}

.patio-chip {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--color-primary);
    text-decoration: none;
    background: var(--color-primary-light);
    border-radius: var(--radius-full);
}

.patio-chip:hover {
    color: var(--color-bg);
    background: var(--color-primary);
}

/* ---- Home: trust cards ---- */
.patio-trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.patio-trust__item {
    display: block;
    padding: var(--space-6);
    text-decoration: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
}

.patio-trust__item:hover {
    border-color: var(--color-primary);
}

.patio-trust__icon {
    display: inline-flex;
    margin-bottom: var(--space-3);
    font-size: var(--text-2xl);
    color: var(--color-accent);
}

.patio-trust__title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-lg);
    color: var(--color-text);
}

.patio-trust__text {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* ---- Footer categories ---- */
.patio-footer__cats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-5);
}

.patio-footer__cat {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-secondary);
    text-decoration: none;
}

.patio-footer__cat:hover {
    color: var(--color-primary);
}

/* ---- Responsive ---- */
@media (max-width: 1080px) {
    .patio-cats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 760px) {
    .patio-hero {
        padding: var(--space-12) 0 var(--space-10);
    }

    .patio-trust {
        grid-template-columns: 1fr;
    }

    .patio-section__head {
        margin-bottom: var(--space-8);
    }
}

@media (max-width: 480px) {
    .patio-cats {
        grid-template-columns: 1fr;
    }

    .patio-hero__actions .btn {
        width: 100%;
    }
}

/* ==========================================================================
   Custom author avatar (rendered by the get_avatar filter in functions.php)
   ========================================================================== */

.avatar-custom {
    border-radius: 50%;
}

/* ==========================================================================
   Sidebar Search widget (core/search block) — compact sizing
   Shrinks the input+button to ~36-38px tall and keeps them on one row on
   both desktop and mobile. Scoped to .widget_search only.
   ========================================================================== */

.sidebar-widget.widget_search {
    padding: var(--space-3) var(--space-4);
}

.sidebar-widget.widget_search .wp-block-search__inside-wrapper {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: var(--space-2);
    height: 38px;
}

.sidebar-widget.widget_search .wp-block-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.sidebar-widget.widget_search .wp-block-search__button {
    flex: 0 0 auto;
    height: 100%;
    margin: 0;
    padding: 0 var(--space-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: var(--text-sm);
    border-radius: var(--radius-lg);
}

@media (max-width: 767px) {
    .sidebar-widget.widget_search {
        padding: var(--space-2) var(--space-3);
    }

    .sidebar-widget.widget_search .wp-block-search__inside-wrapper {
        height: 36px;
    }

    .sidebar-widget.widget_search .wp-block-search__button {
        padding: 0 var(--space-3);
    }
}