/* ================================================================
   Happy Crowds — site-specific design layer (happycrowds.com only).
   Loaded AFTER assets/style.css (see config.happycrowds.php
   'custom_css'), so nothing here touches any other site on this
   engine. Boho / editorial / photo-forward, not clean-SaaS-corporate:
   dusty terracotta + warm sand + deep muted plum, with a sunset-pink
   accent color that only lives here (not in the shared color system)
   to keep the palette feeling chosen for this subject specifically.
   ================================================================ */

:root {
    --hc-sunset: #E8674E;   /* sunset coral/pink — the one "unexpected" accent */
    --hc-ochre:  #D8A23B;   /* warm gold/ochre — small decorative accents */
    --hc-ink:    #2B1D22;   /* near-black plum-brown for deep shadows */
    --hc-paper:  #FBF3E6;   /* warm sand paper tone (matches colors.bg) */
}

/* ---- paper-grain texture on the whole page ---- */
body {
    background-color: var(--c-bg);
    background-image:
        radial-gradient(rgba(91,42,70,0.05) 1px, transparent 1.4px),
        radial-gradient(rgba(201,98,45,0.05) 1px, transparent 1.4px);
    background-size: 3px 3px, 5px 5px;
    background-position: 0 0, 1.5px 1.5px;
}

/* ---- top bar: thin ochre seam instead of a plain hard edge ---- */
.topbar { border-bottom: 3px solid var(--hc-ochre); box-shadow: none; }
.brand { font-weight: 700; letter-spacing: 0.01em; font-size: 1.35rem; }
.nav a.nav-cta { background: var(--hc-sunset); }

/* ---- hero: photo-forward (Highsmith Mardi Gras crowd shot); the
   hand-built sunset/canvas gradient below only shows if hero_image is
   ever unset — .hero-photo's cover/position + scrim come from the base
   engine stylesheet (loaded first), so we must NOT re-declare the
   `background` shorthand on the shared .hero-photo case or it resets
   them back to auto/0%0%. ---- */
.hero:not(.hero-photo) {
    background:
        radial-gradient(ellipse at 20% 15%, rgba(232,103,78,0.55) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 0%, rgba(216,162,59,0.35) 0%, transparent 45%),
        linear-gradient(160deg, #7A3557 0%, #5B2A46 42%, #3A1930 100%);
}
.hero-photo { background-position: center 30%; }
.hero {
    padding: 96px 0 100px;
    position: relative;
    overflow: hidden;
}
.hero::after {
    /* subtle grain over the gradient so it doesn't look like a flat CSS swatch */
    content: "";
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.4px),
        radial-gradient(rgba(0,0,0,0.10) 1px, transparent 1.4px);
    background-size: 3px 3px, 4px 4px;
    background-position: 0 0, 2px 2px;
}
.hero-inner { position: relative; z-index: 1; }
.hero h1 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 2.9rem;
    max-width: 780px;
    margin-left: auto; margin-right: auto;
}
.hero p { font-family: var(--font-body); max-width: 620px; }
.searchbox button { background: var(--hc-sunset); }
.btn-hero { background: var(--hc-sunset); }

/* ---- section headings lean into the serif ---- */
.welcome h2, .section-title { font-weight: 600; }
.welcome p { font-family: var(--font-body); }

/* ---- vibe tiles: warmer, more tactile ---- */
.tile {
    border: 1px solid rgba(91,42,70,0.14);
    border-radius: 16px;
    background: #FEFAF2;
}
.tile:hover { border-color: var(--hc-sunset); box-shadow: 0 10px 24px rgba(91,42,70,0.14); }
.tile .t-icon { background: var(--c-surface); border-radius: 999px; }

/* ---- postcard-style listing cards (meaningfully different from the
   shared .card: paper color, organic asymmetric corners, a "stamp"
   perforation edge instead of a plain border, gentle tilt on hover) ---- */
.card {
    background: #FEFAF2;
    border: 1px solid rgba(91,42,70,0.16);
    border-radius: 4px 18px 4px 18px;
    box-shadow: 0 3px 0 rgba(91,42,70,0.08), 0 10px 24px rgba(43,29,34,0.08);
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card::before {
    /* torn/stamp edge along the top */
    content: "";
    position: absolute; top: -1px; left: 14px; right: 14px; height: 6px;
    background-image: radial-gradient(circle at 6px 0, transparent 3px, #FEFAF2 3.5px);
    background-size: 12px 6px;
    background-repeat: repeat-x;
}
.card:hover { transform: rotate(-0.4deg) translateY(-3px); box-shadow: 0 6px 0 rgba(91,42,70,0.10), 0 16px 30px rgba(43,29,34,0.14); }
.card.tier-premium { border: 2px solid var(--hc-sunset); box-shadow: 0 3px 0 rgba(232,103,78,0.18), 0 10px 26px rgba(232,103,78,0.16); }
.card.tier-featured { border: 1.5px solid var(--c-primary); }
.avatar { border-radius: 999px; font-family: var(--font-heading); }
.card h3 { font-family: var(--font-heading); font-weight: 600; }
.badge-premium { background: var(--hc-sunset); }

/* ---- tag chips (vibe_tags custom field) ---- */
.tag-chip {
    background: var(--c-surface);
    border: 1px solid rgba(91,42,70,0.18);
    color: var(--c-primary);
}

/* ---- detail page: pull-quote treatment for the editorial description ---- */
.detail-head h1 { font-family: var(--font-heading); font-weight: 600; }
.editorial-quote {
    font-family: var(--font-heading);
    font-size: 1.32rem;
    line-height: 1.5;
    font-weight: 400;
    font-style: italic;
    color: var(--c-primary);
    border-left: 4px solid var(--hc-sunset);
    padding: 4px 0 4px 22px;
    margin: 18px 0 26px;
}

/* ---- affiliate buttons: distinct earthy variant, not the primary CTA color ---- */
.affiliate-actions { margin-top: 22px; }
.btn-affiliate {
    background: transparent;
    color: var(--c-primary);
    border: 2px solid var(--hc-ochre);
    box-shadow: none;
}
.btn-affiliate:hover { background: var(--hc-ochre); color: #fff; filter: none; }
.btn-affiliate-tickets::before { content: "🎟️ "; }
.btn-affiliate-travel::before { content: "🧳 "; }

/* ---- packages / pkg cards pick up the serif price too ---- */
.pkg .price { font-family: var(--font-heading); }
.pkg.pkg-highlight { border: 2px solid var(--hc-sunset); box-shadow: 0 8px 24px rgba(232,103,78,0.16); }

/* ---- footer ---- */
.site-footer { background: var(--hc-ink); }
.footer-name { font-family: var(--font-heading); font-weight: 600; }

/* ---- filter/pagination links warm up to match ---- */
.filter-links a.current, .pagination .current { background: var(--c-primary); }