/*
 * style.css — Market for the Blind
 *
 * Design principles applied here:
 *
 * 1. Color contrast: all text meets WCAG AA minimum 4.5:1 ratio.
 *    Body text is near-black on white. Links are dark blue.
 *    Focus indicators use a high-contrast gold outline.
 *
 * 2. Focus indicators: every focusable element has a clearly
 *    visible :focus style. Never suppressed with outline: none.
 *
 * 3. Font sizing: base is 1.125rem (18px equivalent) — larger
 *    than browser default to aid low-vision users.
 *
 * 4. Spacing: generous line-height and padding so content does
 *    not feel cramped for magnification users.
 *
 * 5. No color-only indicators: errors use text labels, not just
 *    red color. Required fields are labeled in text.
 *
 * 6. Layout: single-column, top-to-bottom reading order.
 *    No floating columns that confuse reading order.
 *
 * 7. Navigation: visible, logically ordered, keyboard accessible.
 *
 * 8. Forms: every input has an explicit label above it.
 *    Error messages appear before the form, in an alert region.
 */

/* ============================================================
   RESET AND BASE
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 112.5%; /* 18px base */
    scroll-behavior: smooth;
}

body {
    font-family: Georgia, 'Times New Roman', Times, serif;
    background-color: #ffffff;
    color: #1a1a1a;
    line-height: 1.8;        /* increased from 1.7 — more breathing room between lines */
    max-width: 960px;        /* increased from 900px — less cramping when font size increased */
    margin: 0 auto;
    padding: 0 1.5rem;       /* increased side padding */
}

/* ============================================================
   SKIP LINK
   First element in DOM, visually hidden until focused.
   When focused via keyboard, appears at top of page.
   ============================================================ */

.skip-link {
    position: absolute;
    top: -999px;
    left: 0;
    background: #003366;
    color: #ffffff;
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    z-index: 9999;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid #ffcc00;
    outline-offset: 2px;
}

/* Screen-reader only text — visually hidden but announced by assistive technology */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   GLOBAL FOCUS INDICATOR
   Applied to all interactive elements.
   Gold outline on dark blue background for maximum contrast.
   ============================================================ */

:focus-visible {
    outline: 3px solid #ffcc00;
    outline-offset: 3px;
    border-radius: 2px;
}

/* ============================================================
   LINKS
   ============================================================ */

a {
    color: #003f8a;
    /* Dark blue: contrast ratio ~8:1 on white */
    text-decoration: underline;
}

a:hover {
    color: #001f4d;
    text-decoration: underline;
}

a:visited {
    color: #5c0080;
    /* Distinct visited color so users know where they've been */
}

/* ============================================================
   HEADER AND SITE TITLE
   ============================================================ */

header[role="banner"] {
    border-bottom: 2px solid #1a1a1a;
    padding: 1.25rem 0;
    margin-bottom: 2rem;
}

.site-title {
    margin-bottom: 1rem;
}

.site-title a {
    font-size: 1.75rem;
    font-weight: bold;
    text-decoration: none;
    color: #1a1a1a;
    letter-spacing: 0.01em;
}

.site-title a:hover {
    text-decoration: underline;
}

/* ============================================================
   NAVIGATION
   ============================================================ */

/* ============================================================
   NAVIGATION — enhanced with nav bar background and emoji icons
   ============================================================ */

nav[aria-label="Main site navigation"] {
    background-color: #003f8a;
    border-radius: 4px;
    padding: 0.35rem 0.5rem;
    margin-bottom: 1.5rem;
}

nav[aria-label="Main site navigation"] ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem 0.15rem;
    margin: 0;
    padding: 0;
}

nav[aria-label="Main site navigation"] li {
    display: inline;
}

nav[aria-label="Main site navigation"] a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.85rem;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    color: #ffffff;
    border-radius: 3px;
    border-bottom: 2px solid transparent;
    transition: background-color 0.15s ease, border-bottom-color 0.15s ease;
}

nav[aria-label="Main site navigation"] a:hover {
    background-color: rgba(255,255,255,0.15);
    border-bottom-color: #ffcc00;
    color: #ffffff;
    text-decoration: none;
}

nav[aria-label="Main site navigation"] a[aria-current="page"] {
    background-color: rgba(255,255,255,0.2);
    border-bottom-color: #ffcc00;
    color: #ffffff;
}

/* Emoji icon sizing — consistent across platforms */
nav[aria-label="Main site navigation"] a span[aria-hidden="true"] {
    font-size: 1.05rem;
    line-height: 1;
    flex-shrink: 0;
}



/* ============================================================
   RATING LOCK ALERT BANNER
   ============================================================ */

.rating-lock-alert {
    background-color: #fff3cd;
    border: 2px solid #856404;
    border-radius: 3px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    color: #533f03;
}

.rating-lock-alert strong {
    display: block;
    margin-bottom: 0.25rem;
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */

main#main-content {
    padding: 0.5rem 0 3rem;
}

/* ============================================================
   HEADINGS
   ============================================================ */

h1, h2, h3, h4 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    line-height: 1.3;
    margin-bottom: 0.75rem;
    color: #1a1a1a;
}

h1 { font-size: 2rem;   margin-top: 0; }
h2 { font-size: 1.6rem; margin-top: 2.25rem; border-bottom: 2px solid #999999; padding-bottom: 0.4rem; }
h3 { font-size: 1.3rem; margin-top: 1.75rem; }
h4 { font-size: 1.1rem; margin-top: 1.25rem; }

/* ============================================================
   PARAGRAPHS AND BODY TEXT
   ============================================================ */

p {
    margin-bottom: 1rem;
}

/* ============================================================
   FORMS
   Labels sit above their inputs, always.
   Each field group is a block div with vertical spacing.
   ============================================================ */

form div,
.field-group {
    margin-bottom: 1.25rem;
}

label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.35rem;
    color: #1a1a1a;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="date"],
textarea,
select {
    display: block;
    width: 100%;
    max-width: 480px;
    padding: 0.5rem 0.65rem;
    font-size: 1rem;
    font-family: inherit;
    color: #1a1a1a;
    background-color: #ffffff;
    border: 2px solid #595959;
    border-radius: 3px;
    line-height: 1.5;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    border-color: #003f8a;
    outline: 3px solid #ffcc00;
    outline-offset: 1px;
}

textarea {
    max-width: 600px;
    resize: vertical;
    min-height: 6rem;
}

/* Checkboxes and radio buttons: larger hit target, label beside */
input[type="checkbox"],
input[type="radio"] {
    width: 1.2rem;
    height: 1.2rem;
    vertical-align: middle;
    margin-right: 0.5rem;
    cursor: pointer;
}

.checkbox-label,
.radio-label {
    display: flex;
    align-items: center;
    font-weight: normal;
    cursor: pointer;
    margin-bottom: 0.5rem;
}

/* Character counter (plain text, not visual only) */
.char-count {
    font-size: 0.9rem;
    color: #444444;
    margin-top: 0.25rem;
}

/* ============================================================
   BUTTONS
   ============================================================ */

button,
input[type="submit"],
a.button {
    display: inline-block;
    padding: 0.6rem 1.4rem;
    font-size: 1rem;
    font-family: inherit;
    font-weight: bold;
    background-color: #003f8a;
    color: #ffffff;
    border: 2px solid #003f8a;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.4;
}

button:hover,
input[type="submit"]:hover,
a.button:hover {
    background-color: #001f4d;
    border-color: #001f4d;
}

/* Destructive action button (delete, ban, reject) */
button.danger,
a.button.danger {
    background-color: #8b0000;
    border-color: #8b0000;
    color: #ffffff;
}

button.danger:hover,
a.button.danger:hover {
    background-color: #5c0000;
    border-color: #5c0000;
}

/* Secondary / neutral button */
button.secondary,
a.button.secondary {
    background-color: #ffffff;
    color: #1a1a1a;
    border-color: #595959;
}

button.secondary:hover,
a.button.secondary:hover {
    background-color: #f0f0f0;
}

/* ============================================================
   ERROR AND SUCCESS MESSAGES
   Role="alert" on the container ensures screen readers announce
   the message without the user needing to navigate to it.
   ============================================================ */

.error-box {
    background-color: #fff0f0;
    border: 2px solid #8b0000;
    border-radius: 3px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    color: #5c0000;
}

.error-box h3 {
    margin-top: 0;
    font-size: 1.1rem;
}

.error-box ul {
    margin: 0.5rem 0 0 1.25rem;
}

.success-box {
    background-color: #f0fff4;
    border: 2px solid #145214;
    border-radius: 3px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    color: #0d3d0d;
}

.notice-box {
    background-color: #f0f4ff;
    border: 2px solid #003f8a;
    border-radius: 3px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    color: #001f4d;
}

/* ============================================================
   LISTING CARDS (used on homepage and search results)
   ============================================================ */

.listing-list {
    list-style: none;
    padding: 0;
}

.listing-list li {
    border: 1px solid #cccccc;
    border-radius: 3px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.listing-list article h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;     /* slightly larger — listing title is a key action target */
}

.listing-list article p {
    margin-bottom: 0.35rem;
    font-size: 1rem;       /* fixed: was 0.95rem, too small for low vision users */
}

/* ============================================================
   CATEGORY LIST
   ============================================================ */

.category-list {
    list-style: none;
    padding: 0;
}

.category-list li {
    padding: 0.6rem 0;           /* increased from 0.35rem — easier to target */
    border-bottom: 1px solid #cccccc;
    font-size: 1rem;
}

.category-list li:last-child {
    border-bottom: none;
}

/* ============================================================
   PROFILE RATINGS DISPLAY
   ============================================================ */

.ratings-summary {
    border: 1px solid #cccccc;
    border-radius: 3px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.ratings-summary p {
    margin-bottom: 0.25rem;
}

.review-list {
    list-style: none;
    padding: 0;
}

.review-list li {
    border-top: 1px solid #e0e0e0;
    padding: 0.75rem 0;
}

.review-list li:first-child {
    border-top: none;
}

/* ============================================================
   TABLES (admin panel, logs, coupon lists)
   ============================================================ */

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    background-color: #1a1a1a;
    color: #ffffff;
    font-weight: bold;
}

td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #cccccc;
    vertical-align: top;
}

tr:nth-child(even) td {
    background-color: #f7f7f7;
}


/* ============================================================
   PRINT STYLES
   ============================================================ */

@media print {
    .skip-link,
    nav,
    button,
    input[type="submit"] {
        display: none;
    }

    a {
        color: #000000;
        text-decoration: underline;
    }

    body {
        font-size: 12pt;
        color: #000000;
        background: #ffffff;
    }
}

/* ============================================================
   FOOTER
   ============================================================ */

/* ============================================================
   FOOTER — enhanced Customer Service section
   ============================================================ */

footer[role="contentinfo"] {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid #cccccc;
    font-size: 0.95rem;
    color: #444444;
}

.footer-help {
    background-color: #f0f4ff;
    border: 1px solid #c0ccee;
    border-radius: 4px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 1rem;
}

.footer-help a {
    color: #003f8a;
    font-weight: bold;
}

/* Hit counter */
.hit-counter {
    font-size: .95rem;
    color: #555555;
    margin: 0 0 1rem 0;
    padding: .5rem 0;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
}

.hit-counter strong {
    color: #003f8a;
}

/* Customer Service heading */
.footer-nav-heading {
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #666666;
    margin: 0 0 0.75rem 0;
    padding: 0;
}

/* Footer nav link list */
.footer-nav-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0;
}

.footer-nav-list li {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
}

.footer-nav-list a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #003f8a;
    font-size: 0.95rem;
    text-decoration: none;
    padding: 0.3rem 0.5rem 0.3rem 0;
    border-bottom: 1px solid transparent;
    transition: border-bottom-color 0.12s ease, color 0.12s ease;
}

.footer-nav-list a:hover {
    color: #001f4d;
    border-bottom-color: #003f8a;
    text-decoration: none;
}

.footer-nav-list a span[aria-hidden="true"] {
    font-size: 1rem;
    flex-shrink: 0;
    line-height: 1;
}

footer[role="contentinfo"] nav a:hover {
    color: #001f4d;
}

.footer-tagline {
    margin-bottom: 0.3rem;
    color: #444444;
}

.footer-copy {
    color: #666666;
    font-size: 0.9rem;
}



/* ============================================================
   CONTACT PAGE TRIAGE PANELS
   ============================================================ */

.contact-panel {
    margin-bottom: 0.75rem;
    border: 2px solid #cccccc;
    border-radius: 4px;
    overflow: hidden;
}

.contact-panel button {
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1.1rem;
    background-color: #f5f5f5;
    color: #1a1a1a;
    border: none;
    border-radius: 0;
    font-size: 1.05rem;
    font-weight: bold;
    cursor: pointer;
    line-height: 1.4;
}

.contact-panel button:hover {
    background-color: #e8e8e8;
    color: #1a1a1a;
}

.contact-panel button[aria-expanded="true"] {
    background-color: #003f8a;
    color: #ffffff;
    border-bottom: 2px solid #003f8a;
}

.cp-arrow {
    font-size: 0.8rem;
    margin-left: 0.75rem;
    flex-shrink: 0;
}

.panel-body {
    padding: 1.25rem 1.25rem 0.75rem;
    border-top: 1px solid #cccccc;
}

.panel-body ul {
    margin: 0.5rem 0 1rem 1.5rem;
}

.panel-body li {
    margin-bottom: 0.5rem;
}

.panel-body p {
    margin-bottom: 0.9rem;
}

.field-hint {
    font-size: 0.9rem;
    color: #444444;
    margin-top: 0.2rem;
    margin-bottom: 0.35rem;
}

/* ============================================================
   LISTING SPOTLIGHT
   Appears in header on every page — random active listing.
   Understated but readable. Does not compete with nav or content.
   ============================================================ */

.listing-spotlight {
    background-color: #f5f0ff;
    border-left: 4px solid #5c0080;
    border-radius: 0 4px 4px 0;
    padding: 0.7rem 1.1rem;
    margin-bottom: 1.25rem;
    font-size: 1rem;
    line-height: 1.6;
}

.spotlight-label {
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #3d0066;      /* dark purple — 7.8:1 on #f5f0ff, passes AAA */
    margin-bottom: 0.2rem;
}

.listing-spotlight a {
    color: #3d0066;
    font-weight: bold;
}

.listing-spotlight a:hover {
    color: #1a0033;
}

.listing-spotlight p {
    margin-bottom: 0;
}

/* ============================================================
   LOW VISION AND MOBILE IMPROVEMENTS
   ============================================================ */

/* Add breathing room between sections — critical under magnification
   so section boundaries are clear without needing to see colour */
section {
    margin-bottom: 2rem;
}

/* Larger checkbox and radio targets — easier to activate with
   reduced vision or motor impairment */
input[type="checkbox"],
input[type="radio"] {
    width: 1.35rem;
    height: 1.35rem;
    vertical-align: middle;
    margin-right: 0.6rem;
    cursor: pointer;
    flex-shrink: 0;
}

.checkbox-label,
.radio-label {
    display: flex;
    align-items: flex-start;  /* top-align so long labels wrap cleanly */
    font-weight: normal;
    cursor: pointer;
    margin-bottom: 0.75rem;   /* increased from 0.5rem */
    line-height: 1.6;
}

/* Announcement styling — clear visual block */
.announcement {
    border-left: 4px solid #003f8a;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    background-color: #f0f4ff;
}

.announcement h3 {
    margin-top: 0;
}

.meta {
    font-size: 0.9rem;
    color: #444444;
}

/* Responsive — narrower viewports (phones, small tablets) */
@media (max-width: 640px) {
    html {
        font-size: 106.25%; /* 17px base on small screens */
    }

    body {
        padding: 0 1rem;
    }

    nav[aria-label="Main site navigation"] ul {
        gap: 0.25rem 0.5rem;
    }

    h2 { font-size: 1.4rem; }
    h3 { font-size: 1.2rem; }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="password"],
    textarea,
    select {
        max-width: 100%;
    }

    button,
    input[type="submit"],
    a.button {
        width: 100%;
        text-align: center;
    }
}

/* High contrast mode — Windows users who enable it get sharp borders
   and system colours instead of our custom palette */
@media (forced-colors: active) {
    .error-box,
    .success-box,
    .notice-box,
    .rating-lock-alert,
    .premium-ad-block,
    .announcement {
        border: 2px solid ButtonText;
    }

    .sponsored-label {
        color: ButtonText;
    }
}

/* ============================================================
   PREMIUM AD BLOCKS
   Appear in header (below nav) and footer (above footer content).
   Visually distinct from content: bordered, tinted, bold link.
   ============================================================ */

.premium-ad-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-top: 2px solid #b8860b;
    border-bottom: 2px solid #b8860b;
    margin-bottom: 1.25rem;
}

.premium-ad-bar--footer {
    margin-top: 1.5rem;
    margin-bottom: 0;
}

.premium-ad-block {
    flex: 1 1 280px;
    background-color: #fffbea;
    border: 2px solid #b8860b;
    border-radius: 4px;
    padding: 0.6rem 0.9rem;
}

.premium-ad-block a {
    font-size: 1.1rem;
    font-weight: bold;
    color: #5c3300;
    text-decoration: underline;
    display: block;
}

.premium-ad-block a:hover {
    color: #3a1f00;
}

.sponsored-label {
    display: block;
    font-size: 0.75rem;          /* slightly larger than 0.7rem */
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5c4600;              /* darkened from #7a6000 — now 5.2:1 on #fffbea, passes AA */
    margin-bottom: 0.25rem;
}

/* Empty slot — uses a muted blue to invite action */
.premium-ad-block--empty {
    background-color: #f0f4ff;
    border-color: #003f8a;
}

.premium-ad-block--empty a {
    color: #003f8a;
    font-size: 1rem;
    font-style: italic;
    font-weight: normal;
}

/* Premium ad promotional pitch box on submit page */
.premium-ad-pitch {
    background-color: #fffbea;
    border: 2px solid #b8860b;
    border-radius: 4px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    color: #3a1f00;
}

/* Slot list on premium-ads.php */
.premium-slot-list {
    list-style: none;
    padding: 0;
}

.premium-slot-item {
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    border: 1px solid #cccccc;
    border-radius: 3px;
    background-color: #fafafa;
}

/* ============================================================
   REPUTATION BADGES
   Inline badges shown on profiles and listing pages.
   Each tier has its own accent colour. Emoji is aria-hidden;
   full meaning is in the aria-label on the parent span.
   ============================================================ */

.rep-badge {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border-radius: 3px;
    font-size: 0.95rem;
    font-weight: bold;
    line-height: 1.4;
    border: 2px solid transparent;
    vertical-align: middle;
}

/* Rising Star — warm gold */
.rep-badge--rising_star {
    background-color: #fffbea;
    border-color: #b8860b;
    color: #5c3d00;
}

/* Trusted Trader — trustworthy blue */
.rep-badge--trusted_trader {
    background-color: #eef4ff;
    border-color: #1a4fa0;
    color: #0d2a5c;
}

/* Community Pillar — rich purple */
.rep-badge--community_pillar {
    background-color: #f5f0ff;
    border-color: #5c0080;
    color: #35004a;
}

/* Elite Member — deep teal */
.rep-badge--elite_member {
    background-color: #eafaf8;
    border-color: #006655;
    color: #003d33;
}

/* Market Legend — deep orange-bronze */
.rep-badge--market_legend {
    background-color: #fff4ee;
    border-color: #b84a00;
    color: #6b2a00;
}

/* Hall of Fame — prestige near-black with gold border */
.rep-badge--hall_of_fame {
    background-color: #1a1a1a;
    border-color: #b8860b;
    color: #ffd700;
}

/* Grace period indicator — subtle, does not distract */
.badge-grace {
    font-size: 0.75rem;
    font-weight: normal;
    opacity: 0.75;
    margin-left: 0.25rem;
}