/*
 * UX Improvements: Cleaner overall, tight listing rows
 * To rollback: remove the enqueue in functions.php (search for 'ux-improvements')
 */

/* =============================================
   PAGE TITLE BANNER GRADIENT
   ============================================= */

section.bg-base-blue-700 {
    background: linear-gradient(135deg, #012d5a 0%, #024D93 45%, #0B60B0 100%) !important;
}

/* =============================================
   FONT
   ============================================= */

body,
body * {
    font-family: 'Outfit', sans-serif !important;
}

/* =============================================
   HERO BANNER
   ============================================= */

/* Subheading text */
section .py-16.text-white p.mb-9,
section .py-24.text-white p.mb-9,
section .lg\:py-24 p.mb-9 {
    font-size: 1.3rem !important;
    line-height: 1.5 !important;
}

/* "Show competitions" button — shimmer sweep */
@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.region-anchor-href {
    background: linear-gradient(
        90deg,
        #0B60B0 0%,
        #0B60B0 40%,
        #1a80e0 50%,
        #0B60B0 60%,
        #0B60B0 100%
    ) !important;
    background-size: 200% auto !important;
    animation: shimmer 3s linear infinite !important;
    border-color: transparent !important;
    color: #ffffff !important;
    padding-top: 0.9rem !important;
    padding-bottom: 0.9rem !important;
    font-size: 1.2rem !important;
    padding-left: 2.7rem !important;
    padding-right: 2.7rem !important;
}

.region-anchor-href:hover {
    background: linear-gradient(
        90deg,
        #0a4f92 0%,
        #0a4f92 40%,
        #0d6bc5 50%,
        #0a4f92 60%,
        #0a4f92 100%
    ) !important;
    background-size: 200% auto !important;
    color: #ffffff !important;
    opacity: 1;
}

/* =============================================
   LISTING ROWS — all contexts
   Targets the ::after class shared by every
   competition row template variant
   ============================================= */

/* Tighten each row's vertical padding + border separator */
.after\:bg-gray-100,
.after\:bg-base-gray-150,
.fav_com_wrap {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    padding-left: 15px !important;
    border-bottom: 1px solid #e9eaec !important;
}

/* Neutralise the negative translate that was used to overlap the old offset band */
.after\:bg-gray-100 img.rounded-full,
.after\:bg-base-gray-150 img.rounded-full,
.fav_com_wrap img.rounded-full {
    transform: none !important;
}

.after\:bg-gray-100:last-child,
.after\:bg-base-gray-150:last-child,
.fav_com_wrap:last-child {
    border-bottom: none !important;
}

/* Odd rows: white — full width */
.after\:bg-gray-100::after,
.after\:bg-base-gray-150::after {
    background-color: #ffffff !important;
    left: 0 !important;
}

/* Even rows: light grey — zebra stripe */
.space-y-6:has(> .after\:bg-gray-100) > div:nth-child(even)::after,
.space-y-6:has(> .after\:bg-base-gray-150) > div:nth-child(even)::after,
.space-y-6:has(> .fav_com_wrap) > .fav_com_wrap:nth-child(even)::after,
#comp-results > div:nth-child(even)::after,
.page-blocks > div:nth-child(even)::after {
    background-color: #f5f6f7 !important;
}

/* =============================================
   LISTING CONTAINERS — collapse space-y-6 gap
   Applies wherever competition rows appear:
   archive, homepage, single page, dashboard
   ============================================= */

/* :has() targets any space-y-6 that directly wraps competition rows */
.space-y-6:has(> .after\:bg-gray-100),
.space-y-6:has(> .after\:bg-base-gray-150),
.space-y-6:has(> .fav_com_wrap),
#comp-results:not(:has(.no-data-found)),
.page-blocks:not(:has(.no-data-found)) {
    border-top: 1px solid #e9eaec;
}

.no-data-found {
    display: block !important;
    margin-top: 2rem !important;
    padding-top: 0.5rem !important;
}

.space-y-6:has(> .after\:bg-gray-100) > * + *,
.space-y-6:has(> .after\:bg-base-gray-150) > * + *,
.space-y-6:has(> .fav_com_wrap) > * + *,
#comp-results > * + *,
.page-blocks > * + * {
    margin-top: 0 !important;
}

/* =============================================
   LISTING ROW INTERNALS
   ============================================= */

/* Slightly reduce the left-info column gap */
.after\:bg-gray-100 .group.flex.items-center.gap-6,
.after\:bg-base-gray-150 .group.flex.items-center.gap-6 {
    gap: 1rem;
}

/* Date text — slightly muted */
.after\:bg-gray-100 p.text-xs,
.after\:bg-base-gray-150 p.text-xs,
.fav_com_wrap p.text-xs {
    color: #374151;
}

/* Tighten date and title vertical spacing */
.after\:bg-gray-100 .flex.flex-col p,
.after\:bg-base-gray-150 .flex.flex-col p,
.fav_com_wrap .flex.flex-col p {
    margin-bottom: 3px;
}

.after\:bg-gray-100 .flex.flex-col a.inline-block,
.after\:bg-base-gray-150 .flex.flex-col a.inline-block,
.fav_com_wrap .flex.flex-col a.inline-block {
    margin-bottom: 2px;
}

/* Competition title — slightly sharper */
.after\:bg-gray-100 a.text-base.font-medium,
.after\:bg-base-gray-150 a.text-base.font-medium,
.fav_com_wrap a.text-base.font-medium {
    letter-spacing: 0.01em;
}

/* Club name link */
.after\:bg-gray-100 a.text-sm.font-light,
.after\:bg-base-gray-150 a.text-sm.font-light {
    color: #374151;
}

/* Heart icon — overlaid on top-right of thumbnail */
.after\:bg-gray-100 .group span.relative.flex.items-center,
.after\:bg-base-gray-150 .group span.relative.flex.items-center {
    position: absolute !important;
    top: 2px;
    left: 40px;
    margin-top: 0 !important;
    z-index: 3;
    width: 22px;
    height: 22px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Scale the SVG down to fit the circle */
.after\:bg-gray-100 .group span.relative.flex.items-center svg,
.after\:bg-base-gray-150 .group span.relative.flex.items-center svg {
    width: 13px !important;
    height: 12px !important;
}

/* Tags column — tighter gap */
.after\:bg-gray-100 .flex-1.flex.flex-wrap,
.after\:bg-base-gray-150 .flex-1.flex.flex-wrap,
.fav_com_wrap .flex-1.flex.flex-wrap {
    gap: 6px !important;
}

/* =============================================
   TAGS / BADGES — tighter, sharper
   ============================================= */

.after\:bg-gray-100 a[class*="rounded-md"],
.after\:bg-base-gray-150 a[class*="rounded-md"],
.fav_com_wrap a[class*="rounded-md"],
.single-competitions a[class*="rounded-md"] {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.02em;
    border-radius: 4px !important;
}

/* =============================================
   TYPOGRAPHY — refined hierarchy
   ============================================= */

/* Listings heading */
.archive-competitions h2 {
    letter-spacing: -0.01em;
}

/* Inner banner heading */
section.bg-base-blue-700 h1 {
    letter-spacing: 0.04em;
    font-weight: 500;
}

/* =============================================
   GLOBAL POLISH
   ============================================= */

a {
    transition-duration: 200ms !important;
}

/* Breadcrumb — slightly tighter */
.breadcrumb-wrap,
.wp_breadcrumb {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* Subscribe section — slightly tighter */
section.bg-base-gray-150 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

/* CTA button — tighter vertical padding + subtle rounding */
.cta-button,
.submit {
    letter-spacing: 0.05em;
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
    border-radius: 5px !important;
}

/* =============================================
   ROUNDED CORNERS
   ============================================= */

/* Dropdown nav submenu */
@media (min-width: 1024px) {
    header .menu ul {
        border-radius: 0 0 6px 6px;
        overflow: hidden;
        min-width: 175px !important;
    }
}

/* Filter sidebar — round the container on desktop */
@media (min-width: 1024px) {
    .filter-sidebar {
        border-radius: 6px;
        overflow: hidden;
        border: 1px solid #d4d4d4;
    }

    /* Individual filter section headings and items sit flush inside */
    .filter-sidebar > div:first-of-type h5 {
        border-radius: 6px 6px 0 0;
    }
}

/* Filter inputs and date pickers */
.filter-sidebar input[type="text"],
.filter-sidebar .datepicker {
    border-radius: 4px;
}

/* Select2 — global rounding (dropdowns are body-appended so can't be scoped) */
.select2-container .select2-selection--single {
    border-radius: 6px !important;
    overflow: hidden;
}

.select2-dropdown {
    border-radius: 0 0 6px 6px !important;
    overflow: hidden;
}

/* Homepage search form wrapper */
section .block.max-w-\[450px\] {
    border-radius: 8px;
    overflow: visible;
}

/* Homepage "Browse all" button — restore gap after listings, full width, taller */
.space-y-6 > div:has(> .cta-button) {
    margin-top: 1.25rem !important;
    padding-left: 0 !important;
}

.space-y-6 > div:has(> .cta-button) .cta-button {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

/* =============================================
   CLUB NAME BANNER (location listing)
   ============================================= */

#comp-results h3.text-white,
.page-blocks h3.text-white {
    border-radius: 6px;
}

/* =============================================
   GOLF CLUBS DIRECTORY PAGE
   ============================================= */

.page-template-golf-clubs-directory .pt-8 {
    padding-top: 1.25rem !important;
}

.dir-info-panel {
    background: #e8f1fb;
    border: 1px solid #b4d4ff;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #374151;
    margin-top: 0;
    margin-bottom: 1.75rem;
}

.dir-info-panel a {
    color: #0B60B0;
    font-weight: 600;
    text-decoration: underline;
}

.dir-info-panel a:hover {
    opacity: 0.8;
}

.clubs-directory {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .clubs-directory {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .clubs-directory {
        grid-template-columns: repeat(4, 1fr);
    }
}

.dir-country {
    margin-bottom: 0;
}

.dir-country-heading {
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #0B60B0;
    border-bottom: 2px solid #0B60B0;
    padding-bottom: 4px;
    margin-bottom: 0.5rem !important;
}

.dir-region {
    margin-bottom: 0.75rem;
}

.dir-region-heading {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #374151;
    margin-bottom: 2px !important;
}

.dir-region-heading a {
    color: #374151;
}

.dir-region-heading a:hover {
    color: #0B60B0;
}

.dir-area {
    margin-left: 0.75rem;
    margin-bottom: 0.4rem;
}

.dir-area-heading {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #6b7280;
    margin-bottom: 1px !important;
}

.dir-area-heading a {
    color: #6b7280;
}

.dir-area-heading a:hover {
    color: #0B60B0;
}

.clubs-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 0.25rem 0.75rem !important;
}

.clubs-list li {
    font-size: 1rem;
    line-height: 1.7;
    border: none !important;
    padding: 0 !important;
}

.clubs-list li a {
    color: #4b5563;
}

.clubs-list li a:hover {
    color: #0B60B0;
    text-decoration: underline;
}

/* =============================================
   ACTIVE FILTERS BAR
   ============================================= */

#active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    margin-bottom: 4px;
}

.af-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-right: 2px;
    white-space: nowrap;
}

.af-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #e8f1fb;
    color: #0B60B0;
    border: 1px solid #b4d4ff;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 3px 8px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    line-height: 1.4;
}

.af-tag:hover {
    background: #d0e6fa;
    border-color: #0B60B0;
}

.af-remove {
    font-size: 0.9rem;
    line-height: 1;
    opacity: 0.7;
    margin-left: 1px;
}

.af-tag:hover .af-remove {
    opacity: 1;
}

/* Datepicker z-index fix — sits above listing row elements */
.ui-datepicker {
    z-index: 9999 !important;
}

/* =============================================
   PAGINATION
   ============================================= */

.competition-navigation {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 6px;
    padding-left: 0 !important;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #e9eaec;
}

.competition-navigation .page-numbers {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 2.2rem !important;
    height: 2.2rem !important;
    padding: 0 0.6rem;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    color: #374151 !important;
    background: #ffffff;
    border: 1px solid #d4d4d4 !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.07);
    transition: all 0.15s ease !important;
    text-decoration: none !important;
}

.competition-navigation .page-numbers:hover {
    background: #f0f6ff !important;
    border-color: #0B60B0 !important;
    color: #0B60B0 !important;
    box-shadow: 0 2px 6px rgba(11,96,176,0.15);
}

.competition-navigation .page-numbers.current {
    background: #0B60B0 !important;
    border-color: #0B60B0 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(11,96,176,0.3);
}

.competition-navigation .page-numbers.dots {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #9ca3af !important;
    min-width: 1.5rem !important;
}

.competition-navigation .prev,
.competition-navigation .next {
    font-size: 0 !important;
    min-width: 2.2rem !important;
    padding: 0 !important;
}

.competition-navigation .prev svg,
.competition-navigation .next svg {
    width: 10px !important;
    height: 10px !important;
}

.competition-navigation .prev svg path,
.competition-navigation .next svg path {
    fill: #374151;
    transition: fill 0.15s ease;
}

.competition-navigation .prev:hover svg path,
.competition-navigation .next:hover svg path {
    fill: #0B60B0;
}

/* =============================================
   BROWSE TOGGLE (month / club pill tabs)
   ============================================= */

.browse-toggle {
    display: inline-flex;
    background: #e8eef5;
    border-radius: 9999px;
    padding: 4px;
    gap: 0;
}

.browse-tab {
    padding: 7px 20px;
    border-radius: 9999px;
    border: none;
    background: transparent;
    color: #374151;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.browse-tab:hover:not(.active) {
    background: rgba(11, 96, 176, 0.1);
    color: #0B60B0;
}

.browse-tab.active {
    background: #0B60B0;
    color: #ffffff;
    box-shadow: 0 1px 4px rgba(11, 96, 176, 0.35);
}