@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=Source+Sans+3:wght@400;600;700&family=Source+Serif+4:wght@400;600&family=Courier+Prime:wght@400;700&display=swap');
/*
Theme Name: 559 Framework
Theme URI: https://559network.com/framework
Author: 559 Digital
Author URI: https://559digital.com
Description: A modern, modular parent theme framework for the 559 Network multisite. Designed for Central Valley California directory sites with built-in location support, REST API readiness, and mobile app compatibility.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 559-framework
Tags: multisite, directory, custom-post-types, block-editor-styles, rest-api

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# CSS Variables (Design Tokens)
# Base Styles
# Typography
# Layout
# Components
# Utilities
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# CSS Variables (Design Tokens)
--------------------------------------------------------------*/
:root {
    /* ============================================
       559 NETWORK — DIRTY NEWSPAPER DESIGN SYSTEM
       Master tokens. Child themes override here.
    ============================================ */

    /* --- Brand Accent (Wheat Orange) --- */
    --color-accent:          #E8761A;
    --color-accent-dark:     #C45E0A;
    --color-accent-light:    #F2913E;
    --color-accent-muted:    #D4793C;

    /* --- Core Palette --- */
    --color-ink:             #1A1A18;   /* Near-black for body text */
    --color-ink-light:       #3A3A36;   /* Secondary text, bylines */
    --color-ink-faint:       #6B6860;   /* Captions, metadata */

    --color-paper:           #F5F0E8;   /* Main background */
    --color-paper-dark:      #EDE8DC;   /* Cards, sidebar bg */
    --color-paper-darker:    #E0D9CC;   /* Borders, dividers */

    --color-rule:            #2A2A26;   /* Column rules, thick borders */
    --color-rule-light:      #C8C2B4;   /* Hairline rules between items */

    /* --- Semantic Mapped to Palette --- */
    --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);

    /* --- Status Colors (kept neutral) --- */
    --color-success:         #3D6B45;
    --color-warning:         #B8860B;
    --color-error:           #8B1A1A;
    --color-info:            #2B4C7E;

    /* ============================================
       TYPOGRAPHY — Newspaper Stack
    ============================================ */

    /* Headline font — serif slab feel */
    --font-heading:    'Playfair Display', 'Georgia', 'Times New Roman', serif;

    /* Body / UI font — clean readable sans */
    --font-primary:    'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;

    /* Classified/dense data — tight tabular feel */
    --font-secondary:  'Source Serif 4', Georgia, serif;

    /* Mono — code, prices, stats */
    --font-mono:       'Courier Prime', 'Courier New', Courier, monospace;

    --font-size-xs:    0.6875rem;   /* 11px — captions, legal */
    --font-size-sm:    0.8125rem;   /* 13px — meta, tags */
    --font-size-base:  1rem;        /* 16px */
    --font-size-lg:    1.125rem;    /* 18px */
    --font-size-xl:    1.25rem;     /* 20px */
    --font-size-2xl:   1.5rem;      /* 24px */
    --font-size-3xl:   1.875rem;    /* 30px */
    --font-size-4xl:   2.5rem;      /* 40px — section headers */
    --font-size-5xl:   3.5rem;      /* 56px — hero headlines */

    --font-weight-normal:    400;
    --font-weight-medium:    500;
    --font-weight-semibold:  600;
    --font-weight-bold:      700;
    --font-weight-black:     900;   /* Newspaper-style heavy heads */

    --line-height-tight:     1.15;  /* Headlines */
    --line-height-snug:      1.3;   /* Subheads */
    --line-height-normal:    1.55;  /* Body copy */
    --line-height-relaxed:   1.75;  /* Long-form */

    --letter-spacing-tight:  -0.02em;   /* Big display heads */
    --letter-spacing-normal:  0;
    --letter-spacing-wide:    0.05em;   /* Caps labels, category tags */
    --letter-spacing-widest:  0.12em;   /* Section flags */

    /* ============================================
       NEWSPAPER-SPECIFIC TOKENS
    ============================================ */

    /* Column rules between content columns */
    --rule-width:            1px;
    --rule-style:            solid;
    --rule-color:            var(--color-rule-light);
    --rule-thick:            3px;   /* Section dividers */
    --rule-thick-color:      var(--color-rule);

    /* Paper texture — applied via pseudo-elements */
    --texture-opacity:       0.04;
    --texture-size:          200px;

    /* Section flag / kicker label above headlines */
    --flag-font:             var(--font-primary);
    --flag-size:             var(--font-size-xs);
    --flag-weight:           var(--font-weight-bold);
    --flag-spacing:          var(--letter-spacing-widest);
    --flag-color:            var(--color-accent);
    --flag-transform:        uppercase;

    /* Masthead / site header height */
    --masthead-height:       80px;
    --masthead-bg:           var(--color-ink);
    --masthead-color:        var(--color-paper);

    /* ============================================
       SPACING
    ============================================ */
    --spacing-unit:   1rem;
    --spacing-xs:     calc(var(--spacing-unit) * 0.25);   /*  4px */
    --spacing-sm:     calc(var(--spacing-unit) * 0.5);    /*  8px */
    --spacing-md:     var(--spacing-unit);                /* 16px */
    --spacing-lg:     calc(var(--spacing-unit) * 1.5);    /* 24px */
    --spacing-xl:     calc(var(--spacing-unit) * 2);      /* 32px */
    --spacing-2xl:    calc(var(--spacing-unit) * 3);      /* 48px */
    --spacing-3xl:    calc(var(--spacing-unit) * 4);      /* 64px */
    --spacing-4xl:    calc(var(--spacing-unit) * 6);      /* 96px */

    /* ============================================
       LAYOUT
    ============================================ */
    --container-sm:   640px;
    --container-md:   768px;
    --container-lg:   1024px;
    --container-xl:   1280px;
    --container-2xl:  1536px;

    /* Newspaper column gap */
    --column-gap:     var(--spacing-xl);
    --column-gap-sm:  var(--spacing-lg);

    /* ============================================
       BORDERS & RADIUS
       (Newspaper is mostly sharp — minimal radius)
    ============================================ */
    --radius-sm:      2px;    /* Subtle only */
    --radius-md:      3px;
    --radius-lg:      4px;
    --radius-xl:      6px;
    --radius-2xl:     8px;
    --radius-full:    9999px; /* Pill badges only */

    /* ============================================
       SHADOWS (Ink-toned, not blue-tinted)
    ============================================ */
    --shadow-sm:  0 1px 2px 0 rgb(26 26 24 / 0.08);
    --shadow-md:  0 3px 6px -1px rgb(26 26 24 / 0.12), 0 2px 4px -2px rgb(26 26 24 / 0.08);
    --shadow-lg:  0 8px 16px -3px rgb(26 26 24 / 0.14), 0 4px 6px -4px rgb(26 26 24 / 0.08);
    --shadow-xl:  0 16px 32px -5px rgb(26 26 24 / 0.18), 0 8px 10px -6px rgb(26 26 24 / 0.1);

    /* ============================================
       TRANSITIONS
    ============================================ */
    --transition-fast:   150ms ease-in-out;
    --transition-base:   250ms ease-in-out;
    --transition-slow:   350ms ease-in-out;

    /* ============================================
       Z-INDEX SCALE
    ============================================ */
    --z-dropdown:        1000;
    --z-sticky:          1020;
    --z-fixed:           1030;
    --z-modal-backdrop:  1040;
    --z-modal:           1050;
    --z-popover:         1060;
    --z-tooltip:         1070;
}

/*--------------------------------------------------------------
# Base Styles
--------------------------------------------------------------*/
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background-color: var(--color-paper);
}

/* Paper texture overlay — applied to body via pseudo-element */
body::before {
    content: '';
    position: fixed;
    inset: 0;                    /* shorthand for top/right/bottom/left: 0 */
    pointer-events: none;        /* clicks pass right through it */
    z-index: var(--z-tooltip);   /* sits above everything visually */
    opacity: var(--texture-opacity);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: var(--texture-size);
}

/*--------------------------------------------------------------
# Typography — Base
--------------------------------------------------------------*/

/* All heading levels use the display serif */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-black);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-ink);
    margin-top: 0;
    margin-bottom: var(--spacing-sm);
}

h1 { font-size: var(--font-size-5xl); }
h2 { font-size: var(--font-size-4xl); }
h3 { font-size: var(--font-size-3xl); }
h4 { font-size: var(--font-size-2xl); }
h5 { font-size: var(--font-size-xl);  }
h6 { font-size: var(--font-size-lg);  }

p {
    margin-top: 0;
    margin-bottom: var(--spacing-md);
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-accent-dark);
    text-decoration: underline;
}

/* Section flag — the little label that sits above a headline */
.flag {
    display: block;
    font-family: var(--flag-font);
    font-size: var(--flag-size);
    font-weight: var(--flag-weight);
    letter-spacing: var(--flag-spacing);
    text-transform: var(--flag-transform);
    color: var(--flag-color);
    margin-bottom: var(--spacing-xs);
}

/* Byline — author/date line under a headline */
.byline {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
    letter-spacing: var(--letter-spacing-normal);
    margin-bottom: var(--spacing-md);
}

/* Pull quote — for featured listing blurbs, testimonials */
blockquote {
    margin: var(--spacing-xl) 0;
    padding: var(--spacing-md) var(--spacing-lg);
    border-left: var(--rule-thick) solid var(--color-accent);
    background: var(--color-paper-dark);
    font-family: var(--font-secondary);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-snug);
    color: var(--color-ink);
}

/* Horizontal rules — thick section break */
hr {
    border: none;
    border-top: var(--rule-thick) solid var(--color-rule);
    margin: var(--spacing-xl) 0;
}

hr.thin {
    border-top-width: var(--rule-width);
    border-top-color: var(--color-rule-light);
}

/*--------------------------------------------------------------
# Layout Basics
--------------------------------------------------------------*/
.site-container {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.site-content {
	flex: 1;
}

.container {
	width: 100%;
	max-width: var(--container-xl);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--spacing-md);
	padding-right: var(--spacing-md);
}

@media (min-width: 640px) {
	.container {
		padding-left: var(--spacing-lg);
		padding-right: var(--spacing-lg);
	}
}

/*--------------------------------------------------------------
# Masthead
--------------------------------------------------------------*/

.site-header {
    background-color: var(--color-ink);
    border-bottom: var(--rule-thick) solid var(--color-accent);
}

/* --- Top bar --- */
.masthead-topbar {
    background-color: var(--color-accent);
    padding: var(--spacing-xs) 0;
}

.masthead-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.masthead-topbar__date,
.masthead-topbar__network {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-paper);
}

.masthead-topbar__network {
    flex: 1;
    text-align: center;
}

.utility-nav__list {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    list-style: none;
    margin: 0;
    padding: 0;
}

.utility-nav__list a {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-paper);
    text-decoration: none;
}

.utility-nav__list a:hover {
    text-decoration: underline;
    color: var(--color-paper);
}

/* --- Main masthead (logo area) --- */
.masthead-main {
    padding: var(--spacing-lg) 0;
    border-bottom: var(--rule-width) solid var(--color-ink-light);
}

.masthead-main__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xl);
}

.masthead-main__site-name {
    font-family: var(--font-heading);
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-black);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-paper);
    text-decoration: none;
    line-height: 1;
}

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

.masthead-main__tagline {
    font-family: var(--font-secondary);
    font-size: var(--font-size-sm);
    font-style: italic;
    color: var(--color-ink-faint);
    margin: var(--spacing-xs) 0 0;
    letter-spacing: var(--letter-spacing-normal);
}

/* Ad slot placeholder */
.masthead-main__ad {
    min-width: 300px;
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-ink-light);
    color: var(--color-ink-faint);
    font-size: var(--font-size-xs);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

/* --- Primary nav bar --- */
/* --- Primary nav bar --- */
.masthead-nav {
    background-color: var(--color-ink);
    border-top: var(--rule-width) solid var(--color-ink-light);
    padding: 0 0 0 0;
}

.masthead-nav__inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-lg);
}

/* Nav list — tabs sit flush to bottom of bar */
.primary-nav__list {
    display: flex;
    align-items: flex-end;
    list-style: none;
    margin: 0;
    padding: var(--spacing-sm) 0 0 0;
    gap: 3px;
}

/* Individual tab */
.primary-nav__list > li > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    background-color: var(--color-ink-light);
    color: var(--color-paper);
    text-decoration: none;
    border-top-left-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm);
    border-bottom: 3px solid transparent;
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast);
    min-width: 100px;
    text-align: center;
}

/* Property name — bold caps */
.primary-nav__list > li > a .nav-tab__label {
    display: block;
    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;
    color: var(--color-paper);
    line-height: 1.2;
}

/* Domain subtitle */
.primary-nav__list > li > a .nav-tab__domain {
    display: block;
    font-family: var(--font-primary);
    font-size: 9px;
    font-weight: var(--font-weight-normal);
    letter-spacing: var(--letter-spacing-normal);
    text-transform: lowercase;
    color: var(--color-ink-faint);
    line-height: 1.4;
    margin-top: 2px;
}

/* Hover state */
.primary-nav__list > li > a:hover {
    background-color: var(--color-ink-faint);
    border-bottom-color: var(--color-accent-muted);
    text-decoration: none;
}

.primary-nav__list > li > a:hover .nav-tab__label,
.primary-nav__list > li > a:hover .nav-tab__domain {
    color: var(--color-paper);
}

/* Active / current page tab */
.primary-nav__list > li.current-menu-item > a,
.primary-nav__list > li.current-menu-ancestor > a {
    background-color: var(--color-ink-faint);
    border-bottom-color: var(--color-accent);
}

.primary-nav__list > li.current-menu-item > a .nav-tab__label,
.primary-nav__list > li.current-menu-ancestor > a .nav-tab__label {
    color: var(--color-paper);
}

.primary-nav__list > li.current-menu-item > a .nav-tab__domain,
.primary-nav__list > li.current-menu-ancestor > a .nav-tab__domain {
    color: var(--color-accent-light);
}

/* Search in nav */
.masthead-nav__search {
    padding-bottom: var(--spacing-sm);
}

.masthead-nav__search .search-form {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.masthead-nav__search .search-field {
    background: var(--color-ink-light);
    border: var(--rule-width) solid var(--color-ink-faint);
    color: var(--color-paper);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    width: 200px;
}

.masthead-nav__search .search-field::placeholder {
    color: var(--color-ink-faint);
}

.masthead-nav__search .search-submit {
    background: var(--color-accent);
    border: none;
    color: var(--color-paper);
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    padding: var(--spacing-xs) var(--spacing-md);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.masthead-nav__search .search-submit:hover {
    background: var(--color-accent-dark);
}

/* Responsive — tabs scroll horizontally on mobile */
@media ( max-width: 768px ) {
    .masthead-nav__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .primary-nav__list {
        overflow-x: auto;
        padding-bottom: 0;
        gap: 2px;
        -webkit-overflow-scrolling: touch;
    }

    .primary-nav__list > li > a {
        min-width: 80px;
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .masthead-nav__search {
        padding: var(--spacing-sm) 0;
        border-top: var(--rule-width) solid var(--color-ink-light);
    }

    .masthead-nav__search .search-field {
        width: 100%;
    }
}

/*--------------------------------------------------------------
# Utility Classes
--------------------------------------------------------------*/
/* Spacing Utilities */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }
.mt-5 { margin-top: var(--spacing-xl); }
.mt-6 { margin-top: var(--spacing-2xl); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }
.mb-5 { margin-bottom: var(--spacing-xl); }
.mb-6 { margin-bottom: var(--spacing-2xl); }

/* Text Utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }

/* Display Utilities */
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.grid { display: grid; }

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.site-footer {
    background-color: var(--color-ink);
    border-top: var(--rule-thick) solid var(--color-accent);
    margin-top: auto;
}

/* --- Widget columns --- */
.footer-widgets {
    padding: var(--spacing-2xl) 0;
    border-bottom: var(--rule-width) solid var(--color-ink-light);
}

.footer-widgets__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.footer-col {
    padding: 0 var(--spacing-xl);
    border-right: var(--rule-width) solid var(--color-ink-light);
}

.footer-col:first-child {
    padding-left: 0;
}

.footer-col:last-child {
    padding-right: 0;
    border-right: none;
}

/* Flag label above each column — reuses .flag from typography */
.footer-col > .flag {
    display: block;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: var(--rule-width) solid var(--color-ink-light);
}

.footer-widget__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-paper);
    margin-bottom: var(--spacing-sm);
}

.footer-widget a {
    color: var(--color-paper-darker);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-widget a:hover {
    color: var(--color-accent-light);
    text-decoration: none;
}

.footer-widget p {
    color: var(--color-ink-faint);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-sm);
}

/* Widget nav lists */
.footer-widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-widget ul li {
    border-bottom: var(--rule-width) solid var(--color-ink-light);
    padding: var(--spacing-xs) 0;
}

.footer-widget ul li:last-child {
    border-bottom: none;
}

/* --- Bottom bar --- */
.footer-bottom {
    padding: var(--spacing-md) 0;
}

.footer-bottom__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
}

.footer-bottom__copy {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    color: var(--color-ink-faint);
    margin: 0;
    letter-spacing: var(--letter-spacing-normal);
}

.footer-bottom__copy a {
    color: var(--color-ink-faint);
    text-decoration: none;
}

.footer-bottom__copy a:hover {
    color: var(--color-accent-light);
}

.footer-nav__list {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-nav__list a {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-ink-faint);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-nav__list a:hover {
    color: var(--color-accent-light);
}

/* --- Responsive --- */
@media ( max-width: 768px ) {
    .footer-widgets__inner {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xl);
    }

    .footer-col {
        padding: 0;
        border-right: none;
        border-bottom: var(--rule-width) solid var(--color-ink-light);
        padding-bottom: var(--spacing-xl);
    }

    .footer-col:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .footer-bottom__inner {
        flex-direction: column;
        text-align: center;
    }
}

@media ( max-width: 480px ) {
    .footer-widgets__inner {
        grid-template-columns: 1fr;
    }
}
/*--------------------------------------------------------------
# Front Page
--------------------------------------------------------------*/

/* ---- Hero ---- */
.front-hero {
    padding: var(--spacing-xl) 0;
}

.front-hero__header {
    margin-bottom: var(--spacing-lg);
}

.front-hero__label {
    display: block;
    text-align: center;
    margin: var(--spacing-sm) 0;
}

/* Hero grid — side / main / side */
.front-hero__grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto;
    gap: 0;
}

/* Left flanking card */
.hero-card--1 {
    border-right: var(--rule-width) solid var(--color-rule-light);
    padding-right: var(--spacing-xl);
}

/* Center main card */
.hero-card--2 {
    padding: 0 var(--spacing-xl);
    border-right: var(--rule-width) solid var(--color-rule-light);
}

/* Right flanking card */
.hero-card--3 {
    padding-left: var(--spacing-xl);
}

.hero-card__image {
    margin-bottom: var(--spacing-md);
    overflow: hidden;
}

.hero-card__image img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(20%);          /* subtle desaturation — newspaper feel */
    transition: filter var(--transition-base);
}

.hero-card__image img:hover {
    filter: grayscale(0%);
}

.hero-card__title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-black);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-ink);
    margin-bottom: var(--spacing-xs);
}

/* Size difference between main and side headlines */
.hero-card--main .hero-card__title  { font-size: var(--font-size-4xl); }
.hero-card--side .hero-card__title  { font-size: var(--font-size-xl); }

.hero-card__title a {
    color: inherit;
    text-decoration: none;
}

.hero-card__title a:hover {
    color: var(--color-accent);
    text-decoration: none;
}

.hero-card__excerpt {
    font-family: var(--font-secondary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

/* ---- Network sections ---- */
.network-section {
    padding: var(--spacing-xl) 0;
}

.network-section__header {
    margin-bottom: var(--spacing-lg);
}

.network-section__title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
}

.network-section__more {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-accent);
    text-decoration: none;
}

.network-section__more:hover {
    color: var(--color-accent-dark);
    text-decoration: underline;
}

/* ---- 3-column listing grid ---- */
.listing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

/*--------------------------------------------------------------
# Listing Card
--------------------------------------------------------------*/
.listing-card {
    display: flex;
    flex-direction: column;
    background: var(--color-paper);
    border-right: var(--rule-width) solid var(--color-rule-light);
    border-bottom: var(--rule-width) solid var(--color-rule-light);
    transition: background-color var(--transition-fast);
}

.listing-card:nth-child(3n) {
    border-right: none;
}

.listing-card:hover {
    background: var(--color-paper-dark);
}

/* --- Media block (image or fallback) --- */
.listing-card__media {
    display: block;
    text-decoration: none;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--color-paper-darker);
}

.listing-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(15%);
    transition: filter var(--transition-base), transform var(--transition-base);
}

.listing-card:hover .listing-card__image img {
    filter: grayscale(0%);
    transform: scale(1.02);
}

/* Accent fallback when no image */
.listing-card__no-image {
    width: 100%;
    height: 100%;
    background: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
}

.listing-card__no-image-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-black);
    color: var(--color-paper);
    text-align: center;
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
}

/* --- Card body --- */
.listing-card__body {
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.listing-card__flag {
    margin-bottom: var(--spacing-xs);
}

.listing-card__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-ink);
    margin-bottom: var(--spacing-sm);
}

.listing-card__title a {
    color: inherit;
    text-decoration: none;
}

.listing-card__title a:hover {
    color: var(--color-accent);
    text-decoration: none;
}

.listing-card__excerpt {
    font-family: var(--font-secondary);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-sm);
    flex: 1;
}

/* Price — accent colored, monospaced feel */
.listing-card__price {
    font-family: var(--font-mono);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
    margin-bottom: var(--spacing-sm);
    letter-spacing: var(--letter-spacing-normal);
}

/* Meta row */
.listing-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-top: auto;
    padding-top: var(--spacing-sm);
    border-top: var(--rule-width) solid var(--color-rule-light);
}

.listing-card__location,
.listing-card__date {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    letter-spacing: var(--letter-spacing-normal);
    display: flex;
    align-items: center;
    gap: 4px;
}

.listing-card__meta-icon {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    opacity: 0.6;
}

/* --- Responsive --- */
@media ( max-width: 768px ) {
    .listing-card {
        border-right: none;
        border-bottom: var(--rule-width) solid var(--color-rule-light);
    }

    .listing-card__body {
        padding: var(--spacing-md);
    }
}

/* ---- Buttons ---- */
.btn {
    display: inline-block;
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    text-decoration: none;
    padding: var(--spacing-sm) var(--spacing-lg);
    border: 2px solid transparent;
    cursor: pointer;
    transition: background-color var(--transition-fast),
                color var(--transition-fast),
                border-color var(--transition-fast);
}

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

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

.btn--outline {
    background: transparent;
    border-color: var(--color-ink);
    color: var(--color-ink);
}

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

/* ---- Ad rows ---- */
.ad-row {
    padding: var(--spacing-lg) 0;
    background: var(--color-paper-dark);
    border-top: var(--rule-width) solid var(--color-rule-light);
    border-bottom: var(--rule-width) solid var(--color-rule-light);
    margin: var(--spacing-xl) 0;
}

.ad-placeholder--leaderboard {
    position: relative;
    width: 100%;
    min-height: 90px;
    background: var(--color-paper-darker);
    border: 1px dashed var(--color-rule-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ad-placeholder__label {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
    color: var(--color-ink-faint);
}

/* ---- Horizontal rules (used throughout front page) ---- */
hr.thick {
    border: none;
    border-top: var(--rule-thick) solid var(--color-rule);
    margin: 0 0 var(--spacing-xs);
}

hr.thin {
    border: none;
    border-top: var(--rule-width) solid var(--color-rule-light);
    margin: 0;
}

/* ---- Responsive ---- */
@media ( max-width: 1024px ) {
    .front-hero__grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Hide right flanking card on tablet */
    .hero-card--3 {
        display: none;
    }

    .hero-card--2 {
        border-right: none;
    }
}

@media ( max-width: 768px ) {
    .front-hero__grid,
    .listing-grid {
        grid-template-columns: 1fr;
    }

    .hero-card--1,
    .hero-card--2,
    .hero-card--3 {
        padding: var(--spacing-lg) 0;
        border-right: none;
        border-bottom: var(--rule-width) solid var(--color-rule-light);
    }

    .listing-card {
        border-right: none;
    }
}
/*--------------------------------------------------------------
# Single Listing
--------------------------------------------------------------*/
.single-listing {
    padding: var(--spacing-xl) 0;
}

/* Breadcrumb */
.breadcrumb {
    padding: var(--spacing-sm) 0;
}

.breadcrumb__list {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.breadcrumb__item {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    letter-spacing: var(--letter-spacing-normal);
}

.breadcrumb__item::after {
    content: '›';
    margin-left: var(--spacing-sm);
    color: var(--color-rule-light);
}

.breadcrumb__item:last-child::after {
    display: none;
}

.breadcrumb__item a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.breadcrumb__item a:hover {
    color: var(--color-accent);
}

.breadcrumb__item--current {
    color: var(--color-ink-light);
}

/* Layout */
.single-listing__layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--spacing-2xl);
    align-items: start;
    padding: var(--spacing-xl) 0;
}

/* Main column */
.single-listing__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-black);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-ink);
    margin-bottom: var(--spacing-sm);
    line-height: var(--line-height-tight);
}

.single-listing__content {
    font-family: var(--font-secondary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-primary);
    margin: var(--spacing-xl) 0;
}

/* Gallery */
.listing-gallery {
    margin: var(--spacing-lg) 0;
}

.listing-gallery__featured {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.listing-gallery__thumbs {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    flex-wrap: wrap;
}

.listing-gallery__thumb {
    width: 80px;
    height: 60px;
    padding: 0;
    border: 2px solid var(--color-paper-darker);
    background: none;
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--transition-fast);
}

.listing-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.listing-gallery__thumb.is-active,
.listing-gallery__thumb:hover {
    border-color: var(--color-accent);
}

.listing-featured-image img {
    width: 100%;
    height: auto;
    display: block;
    margin: var(--spacing-lg) 0;
}

/* Share bar */
.share-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-md) 0;
    border-top: var(--rule-width) solid var(--color-rule-light);
    border-bottom: var(--rule-width) solid var(--color-rule-light);
    margin: var(--spacing-xl) 0;
}

.share-bar__buttons {
    display: flex;
    gap: var(--spacing-sm);
}

.share-btn {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    text-decoration: none;
    padding: var(--spacing-xs) var(--spacing-md);
    border: 1px solid var(--color-paper-darker);
    background: var(--color-paper);
    color: var(--color-ink);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.share-btn:hover {
    background: var(--color-ink);
    color: var(--color-paper);
    text-decoration: none;
}

/* Related listings */
.related-listings {
    margin-top: var(--spacing-2xl);
}

.listing-grid--related {
    margin-top: var(--spacing-lg);
}

/* ---- Sidebar ---- */
.single-listing__sidebar {
    position: sticky;
    top: var(--spacing-xl);
}

.sidebar-block {
    border: var(--rule-width) solid var(--color-paper-darker);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    background: var(--color-paper-dark);
}

.sidebar-block__label {
    display: block;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: var(--rule-width) solid var(--color-rule-light);
}

/* Price */
.sidebar-price {
    font-family: var(--font-mono);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
    line-height: 1;
}

/* Seller info */
.seller-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.seller-info__name {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink);
}

/* Verified badge */
.seller-badge--verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-paper);
    background: var(--color-accent);
    padding: 3px var(--spacing-sm);
}

.seller-badge__icon {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

/* Listing meta DL */
.listing-meta {
    margin: 0;
}

.listing-meta__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) 0;
    border-bottom: var(--rule-width) solid var(--color-rule-light);
}

.listing-meta__row:last-child {
    border-bottom: none;
}

.listing-meta dt {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.listing-meta dd {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    color: var(--color-ink);
    margin: 0;
    text-align: right;
}

.listing-meta dd a {
    color: var(--color-accent);
}

/* Report link */
.sidebar-block--report {
    background: transparent;
    border-color: transparent;
    padding-top: 0;
    padding-bottom: 0;
    text-align: center;
}

.report-link {
    background: none;
    border: none;
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.report-link:hover {
    color: var(--color-error);
}

/* Full width button modifier */
.btn--full {
    width: 100%;
    text-align: center;
    display: block;
}

/*--------------------------------------------------------------
# Modals
--------------------------------------------------------------*/
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgb(26 26 24 / 0.75);
    z-index: var(--z-modal-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
}

.modal-overlay[hidden] {
    display: none;
}

.modal {
    background: var(--color-paper);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    border-top: var(--rule-thick) solid var(--color-accent);
}

.modal--sm {
    max-width: 400px;
}

.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg);
    border-bottom: var(--rule-width) solid var(--color-rule-light);
}

.modal__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-black);
    color: var(--color-ink);
    margin: 0;
    letter-spacing: var(--letter-spacing-tight);
}

.modal__close {
    background: none;
    border: none;
    font-size: var(--font-size-2xl);
    color: var(--color-text-muted);
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color var(--transition-fast);
}

.modal__close:hover {
    color: var(--color-ink);
}

.modal__body {
    padding: var(--spacing-lg);
}

.modal__intro {
    font-family: var(--font-secondary);
    font-size: var(--font-size-sm);
    font-style: italic;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    border-bottom: var(--rule-width) solid var(--color-rule-light);
}

/* Forms */
.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-label {
    display: block;
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-ink);
    margin-bottom: var(--spacing-xs);
}

.form-input {
    width: 100%;
    background: var(--color-paper);
    border: var(--rule-width) solid var(--color-paper-darker);
    border-bottom-width: 2px;
    border-bottom-color: var(--color-ink-faint);
    color: var(--color-ink);
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    padding: var(--spacing-sm) var(--spacing-md);
    transition: border-color var(--transition-fast);
    outline: none;
    display: block;
}

.form-input:focus {
    border-bottom-color: var(--color-accent);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

.form-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.form-radio {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    color: var(--color-ink);
    cursor: pointer;
}

/* Form feedback messages */
.form-message {
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-md);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    border-left: 3px solid;
}

.form-message--success {
    background: #f0faf2;
    border-color: var(--color-success);
    color: var(--color-success);
}

.form-message--error {
    background: #fdf0f0;
    border-color: var(--color-error);
    color: var(--color-error);
}

/* Prevent body scroll when modal open */
body.modal-open {
    overflow: hidden;
}

/* ---- Responsive single listing ---- */
@media ( max-width: 768px ) {
    .single-listing__layout {
        grid-template-columns: 1fr;
    }

    .single-listing__sidebar {
        position: static;
        order: -1;   /* sidebar slides above content on mobile */
    }

    .single-listing__title {
        font-size: var(--font-size-3xl);
    }
}