/*
Theme Name: 559 Classifieds
Template: 559-framework
Description: Classifieds child theme for the 559 Network
Version: 1.0.0
Text Domain: 559-classifieds
*/

@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');


/*--------------------------------------------------------------
# 559 Classifieds — Design Token Overrides
# Inherits everything from 559 Framework, overrides palette only
--------------------------------------------------------------*/

:root {
    /* --- Brand Green (from logo) --- */
    --color-accent:          #049763;
    --color-accent-dark:     #037A4F;
    --color-accent-light:    #06B876;
    --color-accent-muted:    #058A59;

    /* --- Classifieds Paper — slightly darker, newsprint gray --- */
    --color-paper:           #EDEAE4;
    --color-paper-dark:      #E4E0D8;
    --color-paper-darker:    #D6D1C8;

    /* --- Deeper ink tones --- */
    --color-ink:             #141414;
    --color-ink-light:       #2E2E2A;
    --color-ink-faint:       #5A5A54;

    /* --- Rule colors --- */
    --color-rule:            #141414;
    --color-rule-light:      #B8B4A8;

    /* --- Masthead override --- charcoal instead of near-black --- */
    --masthead-bg:           #1C1C1A;

    /* --- Semantic remapped --- */
    --color-primary:         var(--color-accent);
    --color-primary-dark:    var(--color-accent-dark);
    --color-primary-light:   var(--color-accent-light);

    --color-bg-primary:      var(--color-paper);
    --color-bg-secondary:    var(--color-paper-dark);
    --color-bg-tertiary:     var(--color-paper-darker);

    --color-text-primary:    var(--color-ink);
    --color-text-secondary:  var(--color-ink-light);
    --color-text-muted:      var(--color-ink-faint);

    --color-border:          var(--color-paper-darker);
    --color-border-hover:    var(--color-ink-faint);

    /* --- Flag color override --- green instead of orange --- */
    --flag-color:            var(--color-accent);
    
    /* --- Yard sale tab settings --- */
    --font-handwritten: 'Permanent Marker', cursive;
    --yard-sale-orange: #E8420A;
    --yard-sale-black: #0D0D0D;
}

/*--------------------------------------------------------------
# Classifieds Masthead — charcoal + green accent bar
--------------------------------------------------------------*/

/* Top bar goes green instead of orange */
.masthead-topbar {
    background-color: var(--color-accent);
}

/* Bottom border of header goes green */
.site-header {
    border-bottom-color: var(--color-accent);
}

/* Active nav tab bottom border — green */
.primary-nav__list > li.current-menu-item > a,
.primary-nav__list > li.current-menu-ancestor > a {
    border-bottom-color: var(--color-accent);
}

.primary-nav__list > li > a:hover {
    border-bottom-color: var(--color-accent-muted);
}

/*--------------------------------------------------------------
# Classifieds Site Name — logo or styled text
--------------------------------------------------------------*/
.masthead-main__site-name {
    color: var(--color-paper);
    letter-spacing: -0.03em;
}

.masthead-main__site-name:hover {
    color: var(--color-accent-light);
}

/*--------------------------------------------------------------
# Classifieds Cards — tighter, denser feel
--------------------------------------------------------------*/

/* Slightly more compact card body */
.listing-card__body {
    padding: var(--spacing-sm) var(--spacing-md);
}

/* Price in green */
.listing-card__price {
    color: var(--color-accent);
}

/* No image fallback — green block instead of orange */
.listing-card__no-image {
    background: var(--color-accent);
}

/*--------------------------------------------------------------
# Classifieds Buttons
--------------------------------------------------------------*/
.btn--primary {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.btn--primary:hover {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.btn--outline:hover {
    background: var(--color-ink);
    color: var(--color-paper);
}

/*--------------------------------------------------------------
# Classifieds Sidebar
--------------------------------------------------------------*/

/* Price in green */
.sidebar-price {
    color: var(--color-accent);
}

/* Modal top border — green */
.modal {
    border-top-color: var(--color-accent);
}

/* Verified badge — green */
.seller-badge--verified {
    background: var(--color-accent);
}

/*--------------------------------------------------------------
# Classifieds Footer
--------------------------------------------------------------*/
.site-footer {
    border-top-color: var(--color-accent);
}

/*--------------------------------------------------------------
# Classifieds Ad Placeholders — green tinted
--------------------------------------------------------------*/
.listing-card--placeholder {
    background: var(--color-paper-dark);
    border: 1px solid var(--color-rule-light);
}

.listing-card__placeholder-title {
    color: var(--color-ink);
}

/*--------------------------------------------------------------
# Logo Glow
--------------------------------------------------------------*/
.masthead-main__logo-link img {
    filter: drop-shadow( 0 0 12px rgba(4, 151, 99, 0.5) );
    transition: filter 0.3s ease;
}

.masthead-main__logo-link:hover img {
    filter: drop-shadow( 0 0 20px rgba(4, 151, 99, 0.75) );
}

/*--------------------------------------------------------------
# Yard Sale Tab — Sign Style
--------------------------------------------------------------*/

/* Grass blades on yard sale tab */
.primary-nav__list > li.menu-item-yard-sale {
    position: relative;
}

.primary-nav__list > li.menu-item-yard-sale::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 20%;
    transform: translateX(-50%);
    width: 140px;
    height: 18px;
    background-image: url('./assets/images/grass-blades.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom center;
    pointer-events: none;
    z-index: 1;
}

/* Target the yard sale tab specifically */
.primary-nav__list > li.menu-item-yard-sale > a {
    background-color: #111111;
    border: 4px solid #ffffff;
    border-bottom: none;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    padding: 0;
    min-width: 110px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    overflow: visible;
}

/* 559 corner ribbon */
.primary-nav__list > li.menu-item-yard-sale > a::before {
    content: '#559';
    position: absolute;
    top: -4px;
    left: -4px;
    background: var(--color-accent);
    color: #ffffff;
    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: var(--font-weight-black);
    letter-spacing: 0.05em;
    padding: 2px 4px;
    border-bottom-right-radius: 7px;
    border-top-left-radius: 0px;
    line-height: 1;
    z-index: 2;
}

/* Black sign area — YARD SALES text */
.primary-nav__list > li.menu-item-yard-sale > a .nav-tab__label {
    display: block;
    background: var(--yard-sale-black);
    color: var(--yard-sale-orange);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-black);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    padding: var(--spacing-sm) var(--spacing-md);
    padding-top: 8px;
    line-height: 1.1;
    text-shadow: 
        1px 1px 0 rgba(0,0,0,0.8),
        0 0 8px rgba(232, 118, 26, 0.3);
}

/* White rectangle strip at bottom — like the real sign */
.primary-nav__list > li.menu-item-yard-sale > a .nav-tab__domain {
    display: block;
    margin: 0 1em .5em;
    background: #ffffff;
    color: #111111;
    font-family: var(--font-handwritten);
    font-size: 9px;
    
    text-align: center;
    padding: 2px var(--spacing-sm);
    border-radius: 0 0 3px 3px;
    border: 3px solid #dddddd;
    border-top: none;
    letter-spacing: 0.09em;
    line-height: 1.5;
}

/* Hover state */
.primary-nav__list > li.menu-item-yard-sale > a:hover {
    background-color: #1a1a1a;
    border-color: var(--color-accent);
}

.primary-nav__list > li.menu-item-yard-sale > a:hover .nav-tab__label {
    color: #ffffff;
    text-shadow: 
        0 0 12px rgba(232, 118, 26, 0.8),
        0 0 24px rgba(232, 118, 26, 0.4);
}

/* Active state */
.primary-nav__list > li.menu-item-yard-sale.current-menu-item > a {
    border-color: var(--color-accent);
    border-bottom: 3px solid var(--color-accent);
}

/* Bottom border override — sign already has white strip */
.primary-nav__list > li.menu-item-yard-sale > a {
    border-bottom: none !important;
}

/*--------------------------------------------------------------
# Mega Menu
--------------------------------------------------------------*/
.mega-menu {
    background: var(--color-paper-dark);
    border-top: 3px solid var(--color-accent);
    border-bottom: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    position: relative;
    z-index: 40;
}

/* Open state — triggered by JS */
.mega-menu.is-open {
    max-height: 600px;
    padding: var(--spacing-lg) 0;
}

.mega-menu__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--spacing-xl);
    align-items: start;
}

/* CTA bar */
.mega-menu__cta {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: var(--rule-width) solid var(--color-rule-light);
    margin-bottom: var(--spacing-md);
    grid-column: 1 / -1;
}

.mega-menu__post-btn {
    display: inline-block;
    background: var(--color-accent);
    color: var(--color-paper);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-black);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    padding: var(--spacing-sm) var(--spacing-lg);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
}

.mega-menu__post-btn:hover {
    background: var(--color-accent-dark);
    text-decoration: none;
    color: var(--color-paper);
}

.mega-menu__cta-sub {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    color: var(--color-ink-faint);
}

/* Category grid */
.mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--spacing-lg);
}

/* Individual category group */
.mega-menu__group-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-black);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-ink);
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: 4px;
}

.mega-menu__group-title .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    color: var(--color-accent);
}

/* Route badge for auto-routed categories */
.mega-menu__route-badge {
    font-size: 8px;
    font-weight: var(--font-weight-normal);
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-ink-faint);
    margin-left: auto;
}

/* Routed group — slightly different treatment */
.mega-menu__group--routed .mega-menu__group-title {
    border-bottom-color: var(--color-ink-faint);
}

.mega-menu__group--routed .mega-menu__cat-list a {
    color: var(--color-ink-faint);
}

.mega-menu__group--routed .mega-menu__cat-list a:hover {
    color: var(--color-accent);
}

/* Español group */
.mega-menu__group--espanol .mega-menu__group-title {
    border-bottom-color: #c0392b;
    color: #c0392b;
}

.mega-menu__group--espanol .mega-menu__group-title .dashicons {
    color: #c0392b;
}

/* Category list */
.mega-menu__cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mega-menu__cat-list li {
    margin-bottom: 2px;
}

.mega-menu__cat-list a {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    color: var(--color-ink);
    text-decoration: none;
    padding: 2px 0;
    transition: color var(--transition-fast),
                padding-left var(--transition-fast);
}

.mega-menu__cat-list a:hover {
    color: var(--color-accent);
    padding-left: 4px;
    text-decoration: none;
}

.mega-menu__cat-list .dashicons {
    font-size: 12px;
    width: 12px;
    height: 12px;
    color: var(--color-ink-faint);
    flex-shrink: 0;
}

.mega-menu__cat-list a:hover .dashicons {
    color: var(--color-accent);
}

.mega-menu__see-all {
    font-weight: var(--font-weight-bold);
    color: #c0392b !important;
}

/* Ad slot */
.mega-menu__ad {
    width: 250px;
    flex-shrink: 0;
    grid-row: 2;
}

.mega-menu__ad-inner {
    width: 250px;
    height: 250px;
    background: var(--color-paper-darker);
    border: var(--rule-width) solid var(--color-rule-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mega-menu__ad-label {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-ink-faint);
}

/* Responsive */
@media ( max-width: 1024px ) {
    .mega-menu__grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .mega-menu__ad {
        display: none;
    }
}

@media ( max-width: 768px ) {
    .mega-menu__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .mega-menu.is-open {
        max-height: 1200px;
    }
}
.mega-menu__toggle {
    display: none;
    align-items: center;
    gap: var(--spacing-xs);
    background: var(--color-accent);
    color: var(--color-paper);
    border: none;
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
}

@media ( max-width: 768px ) {
    .mega-menu__toggle {
        display: flex;
    }
}