/*
Theme Name: Picklor
Theme URI: https://picklor.com
Author: Picklor Team
Author URI: https://picklor.com
Description: A modern pickleball directory theme for finding courts, clubs, coaches, and events across the USA.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: picklor
Tags: directory, sports, pickleball, custom-logo, custom-menu, featured-images, theme-options

Picklor - The Pickleball Directory Theme
*/

/* ==========================================================================
   CSS Custom Properties (Design Tokens from Tailwind config)
   ========================================================================== */
:root {
    /* Primary */
    --color-primary: #37b2f6;
    --color-primary-container: #1a9ae0;
    --color-on-primary: #ffffff;
    --color-on-primary-container: #ffffff;
    --color-primary-fixed: #d0edfb;
    --color-primary-fixed-dim: #a0d8f5;
    --color-on-primary-fixed: #002d42;
    --color-on-primary-fixed-variant: #0e7db0;
    --color-inverse-primary: #a0d8f5;

    /* Accent / CTA */
    --color-accent: #37b2f6;
    --color-on-accent: #ffffff;

    /* Secondary */
    --color-secondary: #5b588e;
    --color-secondary-container: #c5c0fe;
    --color-on-secondary: #ffffff;
    --color-on-secondary-container: #4f4c82;
    --color-secondary-fixed: #e3dfff;
    --color-secondary-fixed-dim: #c5c0fe;
    --color-on-secondary-fixed: #181347;
    --color-on-secondary-fixed-variant: #444175;

    /* Tertiary */
    --color-tertiary: #855000;
    --color-tertiary-container: #a76500;
    --color-on-tertiary: #ffffff;
    --color-on-tertiary-container: #fffbff;
    --color-tertiary-fixed: #ffdcbb;
    --color-tertiary-fixed-dim: #ffb869;
    --color-on-tertiary-fixed: #2c1700;
    --color-on-tertiary-fixed-variant: #683d00;

    /* Error */
    --color-error: #ba1a1a;
    --color-error-container: #ffdad6;
    --color-on-error: #ffffff;
    --color-on-error-container: #93000a;

    /* Surface */
    --color-surface: #f8f9fb;
    --color-surface-dim: #d9dadc;
    --color-surface-bright: #f8f9fb;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low: #f2f4f6;
    --color-surface-container: #edeef0;
    --color-surface-container-high: #e7e8ea;
    --color-surface-container-highest: #e1e2e4;
    --color-surface-variant: #e1e2e4;
    --color-surface-tint: #37b2f6;
    --color-on-surface: #191c1e;
    --color-on-surface-variant: #474554;
    --color-inverse-surface: #2e3132;
    --color-inverse-on-surface: #f0f1f3;
    --color-background: #f8f9fb;
    --color-on-background: #191c1e;

    /* Outline */
    --color-outline: #777585;
    --color-outline-variant: #c8c4d6;

    /* Brand accent for links/logos */
    --color-brand: #37b2f6;
    --color-brand-dark: #1a9ae0;
}

/* ==========================================================================
   Base / Reset
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-surface);
    color: var(--color-on-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: inherit;
}

/* Material Symbols */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined.fill {
    font-variation-settings: 'FILL' 1;
}

/* ==========================================================================
   WordPress Core Styles
   ========================================================================== */
.alignnone { margin: 5px 20px 20px 0; }
.aligncenter { display: block; margin: 5px auto; }
.alignright { float: right; margin: 5px 0 20px 20px; }
.alignleft { float: left; margin: 5px 20px 20px 0; }
a img.alignright { float: right; margin: 5px 0 20px 20px; }
a img.alignnone { margin: 5px 20px 20px 0; }
a img.alignleft { float: left; margin: 5px 20px 20px 0; }
a img.aligncenter { display: block; margin-left: auto; margin-right: auto; }

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%;
    padding: 5px 3px 10px;
    text-align: center;
}
.wp-caption.alignnone { margin: 5px 20px 20px 0; }
.wp-caption.alignleft { margin: 5px 20px 20px 0; }
.wp-caption.alignright { margin: 5px 0 20px 20px; }
.wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; }

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}
.screen-reader-text:focus {
    background-color: #eee;
    clip: auto !important;
    clip-path: none;
    color: #444;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* ==========================================================================
   Custom Utility Classes (non-Tailwind fallbacks)
   ========================================================================== */
.picklor-gradient-btn {
    background: var(--color-accent);
    color: var(--color-on-accent);
}

.picklor-gradient-btn:hover {
    background: #1a9ae0;
    color: var(--color-on-accent);
}

/* Star fill for ratings */
.star-filled {
    font-variation-settings: 'FILL' 1;
}

/* Pagination */
.picklor-pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 3rem;
}

.picklor-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(200, 196, 214, 0.3);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-on-surface);
    transition: all 0.2s;
}

.picklor-pagination .page-numbers:hover {
    background-color: var(--color-surface-container-low);
}

.picklor-pagination .page-numbers.current {
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-color: transparent;
}

/* ==========================================================================
   Header Mobile Responsiveness Options (Picklor Custom Theme)
   ========================================================================== */

/* --------------------------------------------------------------------------
   OPTION 1: Hide 'List Your Court' button on mobile (< 768px) and evenly 
   space the Logo and the Hamburger Menu (justify-content: space-between)
   -------------------------------------------------------------------------- */
/* UNCOMMENT THE BLOCKS BELOW TO USE OPTION 1 INSTEAD:
@media (max-width: 767.98px) {
    #picklor-list-court-btn {
        display: none !important;
    }
    
    #picklor-header .flex.justify-between {
        justify-content: space-between !important;
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
}
*/

/* --------------------------------------------------------------------------
   OPTION 2: Keep the button in the header, but make it icon-only on mobile 
   (< 768px) so it fits neatly between the Logo and Hamburger Menu
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    #picklor-list-court-btn {
        display: inline-flex !important;
        padding: 0 !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 9999px !important;
        justify-content: center !important;
        align-items: center !important;
        font-size: 0 !important;
        gap: 0 !important;
        box-shadow: none !important;
    }

    #picklor-list-court-btn .material-symbols-outlined {
        font-size: 1.3rem !important;
        margin: 0 !important;
        color: #ffffff !important;
    }
}
```