/* ==========================================================================
   Acaville Custom Styles — Warm Community Design
   ========================================================================== */

/* --- Design Tokens --- */
:root {
    /* Primary */
    --acv-red: #e63946;
    --acv-red-hover: #c1121f;
    --acv-red-light: rgba(230, 57, 70, 0.08);

    /* Warm secondary palette */
    --acv-navy: #1d3557;
    --acv-teal: #457b9d;
    --acv-teal-light: #a8dadc;

    /* Backgrounds */
    --acv-cream: #faf8f5;
    --acv-ivory: #fffdf9;
    --acv-warm-gray: #f3f0ec;
    --acv-warm-gray-dark: #e8e4df;

    /* Text */
    --acv-text: #3d3a36;
    --acv-text-light: #6b6560;
    --acv-heading: #2a2725;

    /* Shadows (warm-tinted) */
    --acv-shadow-sm: 0 2px 8px rgba(45, 30, 15, 0.06);
    --acv-shadow-md: 0 4px 16px rgba(45, 30, 15, 0.10);
    --acv-shadow-lg: 0 8px 32px rgba(45, 30, 15, 0.14);

    /* Radii */
    --acv-radius: 10px;
    --acv-radius-lg: 16px;
    --acv-radius-pill: 50px;
}

/* ==========================================================================
   Global Base Overrides
   ========================================================================== */

body {
    background-color: var(--acv-cream);
    color: var(--acv-text);
}

h1, h2, h3, h4, h5, h6,
.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6 {
    color: var(--acv-heading);
}

a:not(.uk-button):not(.uk-navbar-nav a):not(.acv-cta-buttons a):not(.acv-platform-link) {
    color: var(--acv-teal);
}

a:not(.uk-button):not(.uk-navbar-nav a):not(.acv-cta-buttons a):not(.acv-platform-link):hover {
    color: var(--acv-red);
}

.uk-section-default {
    background-color: var(--acv-cream);
}

.uk-section-muted {
    background-color: var(--acv-warm-gray);
}

/* Warm up images globally */
img {
    border-radius: var(--acv-radius);
}

/* Smooth transitions on all interactive elements */
a, button, .uk-button, input, .uk-card {
    transition: all 0.25s ease;
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */

/* Header bar warmth */
.tm-header .uk-navbar-container {
    background: var(--acv-ivory) !important;
    border-bottom: 1px solid var(--acv-warm-gray-dark);
}

/* Logo sizing */
.acv-logo-wrap .uk-logo img {
    max-height: 48px;
    width: auto;
}

/* Tagline below logo */
.acv-tagline {
    font-size: 0.8rem;
    line-height: 1.3;
    margin-top: 3px;
    max-width: 300px;
    white-space: nowrap;
    letter-spacing: 0.02em;
    color: var(--acv-text-light);
}

/* Nav links */
.uk-navbar-nav > li > a {
    color: var(--acv-heading) !important;
    font-weight: 500;
    letter-spacing: 0.03em;
    transition: color 0.25s ease;
}

.uk-navbar-nav > li > a:hover,
.uk-navbar-nav > li.uk-active > a {
    color: var(--acv-red) !important;
}

/* Nav dropdown warmth */
.uk-navbar-dropdown {
    background: var(--acv-ivory);
    border-radius: var(--acv-radius);
    box-shadow: var(--acv-shadow-lg);
    border: 1px solid var(--acv-warm-gray-dark);
}

.uk-navbar-dropdown-nav > li > a {
    color: var(--acv-text) !important;
}

.uk-navbar-dropdown-nav > li > a:hover {
    color: var(--acv-red) !important;
}

/* Header social icons */
.tm-header .uk-icon-link,
.tm-header [uk-icon] {
    color: var(--acv-text-light);
    transition: color 0.25s ease;
}

.tm-header .uk-icon-link:hover,
.tm-header [uk-icon]:hover {
    color: var(--acv-red);
}

/* --- CTA Buttons in header --- */
.acv-cta-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
}

.acv-cta-buttons .uk-button-primary {
    background-color: var(--acv-red);
    color: #fff;
    border: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--acv-radius-pill);
    padding: 0 24px;
}

.acv-cta-buttons .uk-button-primary:hover {
    background-color: var(--acv-red-hover);
    transform: scale(1.03);
}

.acv-cta-buttons .uk-button-default {
    border: 2px solid var(--acv-navy);
    color: var(--acv-navy);
    background: transparent;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--acv-radius-pill);
    padding: 0 24px;
}

.acv-cta-buttons .uk-button-default:hover {
    background-color: var(--acv-navy);
    color: #fff;
    transform: scale(1.03);
}

@media (max-width: 959px) {
    .acv-cta-buttons {
        display: none;
    }
}

/* ==========================================================================
   Hero Section (YOOtheme builder — first section)
   ========================================================================== */

/* Override the blue background with warm navy-teal gradient */
main > .uk-section:first-child,
main > [id^="page"]:first-child,
#page\#3 {
    background: linear-gradient(135deg, var(--acv-navy) 0%, var(--acv-teal) 100%) !important;
}

/* Hero heading */
main > .uk-section:first-child h1,
main > .uk-section:first-child .uk-h1,
main > .uk-section:first-child [class*="uk-heading"] {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    font-weight: 700;
}

/* Hero buttons — warm pill style instead of dark gray rectangles */
main > .uk-section:first-child .uk-button {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--acv-radius-pill);
    backdrop-filter: blur(4px);
    font-weight: 600;
    letter-spacing: 0.05em;
    transition: all 0.25s ease;
}

main > .uk-section:first-child .uk-button:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.7);
    transform: translateY(-2px);
}

/* ==========================================================================
   Radio / Now Playing Section
   ========================================================================== */

/* Radio section — warm ivory background */
main > .uk-section:nth-child(2) {
    background-color: var(--acv-ivory);
    border-top: 3px solid var(--acv-red);
}

main > .uk-section:nth-child(2) h2,
main > .uk-section:nth-child(2) .uk-h2 {
    color: var(--acv-heading);
    font-weight: 700;
}

/* Now Playing widget */
.acv-now-playing {
    position: relative;
    border-left: 4px solid var(--acv-red);
    border-radius: var(--acv-radius);
    padding: 1.5rem;
    background: var(--acv-ivory);
    box-shadow: var(--acv-shadow-md);
}

.acv-now-playing-badge {
    display: inline-block;
    background: var(--acv-red);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 4px 12px;
    border-radius: var(--acv-radius-pill);
    margin-bottom: 1rem;
    animation: acv-pulse 2s ease-in-out infinite;
}

@keyframes acv-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ==========================================================================
   News & Events Section
   ========================================================================== */

/* Warm up news card images */
main .uk-section img[src*="upload"],
main .uk-section .uk-card img {
    border-radius: var(--acv-radius);
}

/* News headlines */
main .uk-section h3 a,
main .uk-section .uk-h3 a {
    color: var(--acv-heading);
    text-decoration: none;
}

main .uk-section h3 a:hover {
    color: var(--acv-red);
}

/* Event list warm accent */
.tribe-events-widget .tribe-events-list-widget {
    border-left: 3px solid var(--acv-teal);
    padding-left: 1rem;
}

/* ==========================================================================
   Membership CTA Section (shortcode)
   ========================================================================== */

.acv-section-membership {
    background: linear-gradient(180deg, var(--acv-cream) 0%, var(--acv-warm-gray) 100%);
}

.acv-membership-section {
    text-align: center;
    padding: 4rem 0;
}

.acv-membership-section h2 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--acv-heading);
}

.acv-benefit-card {
    text-align: center;
    padding: 2rem 1rem;
}

.acv-benefit-card .acv-benefit-icon {
    color: var(--acv-red);
    margin-bottom: 1rem;
}

.acv-benefit-card .acv-benefit-icon span[uk-icon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background: var(--acv-red-light);
    border-radius: 50%;
}

.acv-benefit-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--acv-heading);
}

.acv-benefit-card p {
    font-size: 0.9rem;
    color: var(--acv-text-light);
    line-height: 1.6;
}

.acv-membership-pricing {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 2rem 0 1rem;
    color: var(--acv-heading);
}

.acv-membership-cta .uk-button-large {
    background-color: var(--acv-red);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 14px 48px;
    border-radius: var(--acv-radius-pill);
    box-shadow: var(--acv-shadow-md);
    font-size: 1rem;
}

.acv-membership-cta .uk-button-large:hover {
    background-color: var(--acv-red-hover);
    transform: scale(1.03);
    box-shadow: var(--acv-shadow-lg);
}

/* ==========================================================================
   Platform Cards (shortcode)
   ========================================================================== */

.acv-section-platforms {
    background: var(--acv-cream);
}

.acv-platforms-section {
    padding: 4rem 0;
}

.acv-platforms-section h2 {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 2.5rem;
    color: var(--acv-heading);
}

.acv-platform-card {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: var(--acv-ivory);
    border-radius: var(--acv-radius-lg);
    box-shadow: var(--acv-shadow-sm);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    border: 1px solid var(--acv-warm-gray-dark);
}

.acv-platform-card:hover {
    box-shadow: var(--acv-shadow-lg);
    transform: translateY(-4px);
}

.acv-platform-card .acv-platform-icon {
    color: var(--acv-red);
    margin-bottom: 1.25rem;
}

.acv-platform-card .acv-platform-icon span[uk-icon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background: var(--acv-red-light);
    border-radius: 50%;
}

.acv-platform-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--acv-heading);
}

.acv-platform-card p {
    font-size: 0.9rem;
    color: var(--acv-text-light);
    margin-bottom: 1.25rem;
    line-height: 1.6;
}

.acv-platform-card .acv-platform-link {
    color: var(--acv-teal);
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.02em;
}

.acv-platform-card .acv-platform-link:hover {
    color: var(--acv-red);
    text-decoration: underline;
}

/* ==========================================================================
   Social Icons
   ========================================================================== */

.acv-social-icons {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.acv-social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--acv-text-light);
    background: transparent;
    transition: all 0.25s ease;
}

.acv-social-icons a:hover {
    color: var(--acv-red);
    background: var(--acv-red-light);
}

/* ==========================================================================
   Footer & Builder Social Section
   ========================================================================== */

/* YOOtheme builder footer — warm dark background */
footer,
.tm-footer {
    background: var(--acv-navy) !important;
    color: rgba(255, 255, 255, 0.85);
}

footer a,
.tm-footer a {
    color: var(--acv-teal-light) !important;
}

footer a:hover,
.tm-footer a:hover {
    color: #fff !important;
}

/* "Find us on the Socials" builder section — warm gray */
main > .uk-section:nth-last-child(3),
main > .uk-section:nth-last-child(4) {
    background-color: var(--acv-warm-gray);
}

/* ==========================================================================
   Hero Sub-classes (if using the acv-hero shortcode)
   ========================================================================== */

.acv-hero {
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.acv-hero h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5em;
}

.acv-hero .acv-hero-subtitle {
    font-size: 1.25rem;
    opacity: 0.85;
    max-width: 600px;
    margin: 0 auto 1.5em;
}

.acv-hero .acv-hero-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ==========================================================================
   Focus & Accessibility
   ========================================================================== */

:focus-visible {
    outline: 2px solid var(--acv-teal);
    outline-offset: 2px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 639px) {
    .acv-membership-section h2,
    .acv-platforms-section h2 {
        font-size: 1.6rem;
    }

    .acv-membership-section {
        padding: 2.5rem 0;
    }

    .acv-platforms-section {
        padding: 2.5rem 0;
    }

    .acv-benefit-card,
    .acv-platform-card {
        padding: 1.5rem 1rem;
    }
}