/*
Theme Name:     Vunulu — KTA Child
Theme URI:      https://vunulu.co.ke/
Description:    Vunulu Luhya Vibes child theme for KTA-SirDarancoh. Adds the dark/gold Vulai brand to Portfolio, Gallery and About surfaces without touching the parent theme. Safe to update the parent theme — your overrides live here.
Author:         Vunulu Luhya Vibes
Author URI:     https://vunulu.co.ke/
Template:       kta
Version:        1.2.1
License:        GNU General Public License v2 or later
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:    vunulu-child
Tags:           child-theme, portfolio, gallery, dark-mode, events
*/

/* ==========================================================================
   Vunulu brand tokens — only applied inside body.vunulu-page wrapper
   so the existing Tourism Awards site is untouched.
   ========================================================================== */
.vunulu-page {
    --vu-bg:     #0e0d0b;
    --vu-panel:  #15140f;
    --vu-ink:    #f4ecd8;
    --vu-muted:  #b9a677;
    --vu-accent: #c8a24a;
    --vu-line:   rgba(244, 236, 216, 0.12);
    --vu-shadow: 0 16px 50px rgba(0, 0, 0, 0.5);
    --vu-radius: 10px;
    background: var(--vu-bg);
    color: var(--vu-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    line-height: 1.55;
}

.vunulu-page .container,
.vunulu-page .vu-container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 16px;
}

/* --- Hero ---------------------------------------------------------------- */
.vunulu-page .vu-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-bottom: 1px solid var(--vu-line);
    background: var(--vu-panel);
}
.vunulu-page .vu-hero img.banner {
    display: block;
    width: 100%;
    height: auto;
    max-height: 460px;
    object-fit: cover;
    object-position: center;
}

/* Illustrated banner variant: image already carries headline + brand text,
   so we let it breathe at full width without the dark gradient overlay. */
.vunulu-page .vu-hero-illustrated {
    background: var(--vu-bg);
}
.vunulu-page .vu-hero-illustrated img.banner {
    max-height: 540px;
    object-fit: contain;
    background: var(--vu-bg);
}
@media (max-width: 768px) {
    .vunulu-page .vu-hero-illustrated img.banner { max-height: 320px; }
}
.vunulu-page .vu-hero .vu-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    background: linear-gradient(to bottom,
                rgba(14, 13, 11, 0.35),
                rgba(14, 13, 11, 0.78));
}
.vunulu-page .vu-hero h1 {
    margin: 0 0 6px;
    font-size: 36px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vu-accent);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.vunulu-page .vu-hero p.lead {
    margin: 0;
    color: var(--vu-ink);
    font-size: 16px;
    letter-spacing: 0.04em;
    max-width: 720px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.vunulu-page .vu-hero .fest-logo {
    max-height: 78px;
    height: auto;
    width: auto;
    margin-bottom: 14px;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

/* --- Eyebrow / section heading ------------------------------------------ */
.vunulu-page .vu-eyebrow {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--vu-accent);
}
.vunulu-page .vu-section-title {
    margin: 0 0 14px;
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vu-muted);
}

/* --- Featured event cards (portfolio archive grid) ---------------------- */
.vunulu-page .vu-featured {
    margin: 32px 0;
}
.vunulu-page .vu-featured .row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}
.vunulu-page .vu-card {
    position: relative;
    display: block;
    border: 1px solid var(--vu-line);
    border-radius: var(--vu-radius);
    overflow: hidden;
    text-decoration: none;
    color: var(--vu-ink);
    background: #1c1a14;
    transition: transform 0.25s ease, border-color 0.2s, box-shadow 0.25s;
    cursor: pointer;
}
.vunulu-page .vu-card:hover {
    transform: translateY(-4px);
    border-color: var(--vu-accent);
    box-shadow: var(--vu-shadow);
}
.vunulu-page .vu-card .img-wrap {
    position: relative;
    aspect-ratio: 4 / 5;
    background: #000;
}
.vunulu-page .vu-card .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.vunulu-page .vu-card .img-wrap .tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--vu-accent);
    color: var(--vu-bg);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    font-weight: 600;
}
.vunulu-page .vu-card .info {
    padding: 14px 16px;
}
.vunulu-page .vu-card .info .t {
    font-size: 18px;
    color: var(--vu-ink);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.vunulu-page .vu-card .info .d {
    font-size: 12px;
    color: var(--vu-accent);
    margin-top: 4px;
}
.vunulu-page .vu-card .info .v {
    font-size: 12px;
    color: var(--vu-muted);
    margin-top: 2px;
}
.vunulu-page .vu-card .info .cta {
    margin-top: 10px;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--vu-accent);
}

/* --- Sponsors grid ------------------------------------------------------- */
.vunulu-page .vu-sponsors {
    margin: 40px 0;
    padding: 28px 22px;
    border: 1px solid var(--vu-line);
    border-radius: 12px;
    background: linear-gradient(180deg,
                rgba(0, 0, 0, 0.25),
                rgba(0, 0, 0, 0));
}
.vunulu-page .vu-sponsors > h2 {
    margin: 0 0 4px;
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vu-accent);
    text-align: center;
}
.vunulu-page .vu-sponsors > .lead {
    margin: 0 auto 18px;
    max-width: 560px;
    text-align: center;
    font-size: 13px;
    color: var(--vu-muted);
    font-style: italic;
}
.vunulu-page .vu-sponsors .cat {
    margin: 18px 0 10px;
}
.vunulu-page .vu-sponsors .cat h3 {
    margin: 0 0 10px;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--vu-muted);
    border-bottom: 1px solid var(--vu-line);
    padding-bottom: 6px;
}
.vunulu-page .vu-sponsors .grid-logos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
.vunulu-page .vu-sponsors .logo-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--vu-panel);
    border: 1px solid var(--vu-line);
    border-radius: 8px;
    padding: 10px;
    text-decoration: none;
    color: var(--vu-ink);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    min-height: 130px;
}
.vunulu-page .vu-sponsors .logo-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    border-color: var(--vu-accent);
}
.vunulu-page .vu-sponsors .logo-tile .img-frame {
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    overflow: hidden;
    background: #fff;
    border-radius: 6px;
    padding: 6px;
}
.vunulu-page .vu-sponsors .logo-tile img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.vunulu-page .vu-sponsors .logo-tile .placeholder {
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--vu-bg);
    background: linear-gradient(135deg, var(--vu-accent), #b48a36);
    border-radius: 6px;
    margin-bottom: 10px;
    text-align: center;
    padding: 6px;
    line-height: 1.1;
    letter-spacing: 0.04em;
}
.vunulu-page .vu-sponsors .logo-tile .nm {
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    color: var(--vu-ink);
    letter-spacing: 0.05em;
    line-height: 1.25;
}

/* --- Project meta sidebar (single-portfolio) ----------------------------- */
.vunulu-page .vu-project-meta {
    background: var(--vu-panel, #15140f) !important;
    border: 1px solid var(--vu-line, rgba(244, 236, 216, 0.12)) !important;
    border-radius: var(--vu-radius, 14px) !important;
    padding: 22px !important;
    color: var(--vu-ink, #f4ecd8) !important;
}
.vunulu-page .vu-project-meta h3 {
    margin: 0 0 14px !important;
    font-size: 13px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--vu-accent, #c8a24a) !important;
    border-bottom: 1px solid var(--vu-line, rgba(244, 236, 216, 0.12)) !important;
    padding-bottom: 10px !important;
    font-weight: 700 !important;
}
.vunulu-page .vu-project-meta ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.vunulu-page .vu-project-meta li {
    /* The value text — explicit high-contrast cream so it doesn't
       inherit a dark color from the parent theme. The label SPAN
       overrides with gold. Anything else inside the LI inherits cream. */
    padding: 10px 0 !important;
    border-bottom: 1px dashed var(--vu-line, rgba(244, 236, 216, 0.12)) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: var(--vu-ink, #f4ecd8) !important;
}
.vunulu-page .vu-project-meta li:last-child {
    border-bottom: 0 !important;
}
.vunulu-page .vu-project-meta li * {
    color: var(--vu-ink, #f4ecd8) !important;
}
.vunulu-page .vu-project-meta li span {
    /* The label — gold accent, uppercase eyebrow style. */
    display: block !important;
    color: var(--vu-accent, #c8a24a) !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
    min-width: 0 !important;
}
.vunulu-page .vu-project-meta li b,
.vunulu-page .vu-project-meta li strong {
    color: var(--vu-ink, #f4ecd8) !important;
    font-weight: 600 !important;
}

/* --- Project gallery (single-portfolio) ---------------------------------- */
.vunulu-page .vu-gallery {
    margin: 36px 0 0;
}
.vunulu-page .vu-gallery h3 {
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vu-muted);
    border-bottom: 1px solid var(--vu-line);
    padding-bottom: 8px;
    margin: 0 0 16px;
}
.vunulu-page .vu-gallery .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}
.vunulu-page .vu-gallery .cell {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 6px;
    background: #000;
    border: 1px solid var(--vu-line);
}
.vunulu-page .vu-gallery .cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.vunulu-page .vu-gallery .cell:hover img {
    transform: scale(1.06);
}

/* --- About page ---------------------------------------------------------- */
.vunulu-about main {
    padding: 32px 0 80px;
}
.vunulu-about .vu-section {
    padding: 32px 0;
    border-bottom: 1px solid var(--vu-line);
}
.vunulu-about .vu-section:last-child {
    border-bottom: 0;
}
.vunulu-about .vu-section h2 {
    margin: 0 0 12px;
    font-size: 26px;
    letter-spacing: 0.02em;
    color: var(--vu-ink);
}
.vunulu-about .vu-section .lead {
    color: var(--vu-accent);
    font-style: italic;
    font-size: 17px;
    max-width: 760px;
    margin: 0 0 16px;
}
.vunulu-about .vu-section p {
    color: var(--vu-ink);
    opacity: 0.92;
    max-width: 760px;
    margin: 0 0 12px;
    font-size: 15px;
}

/* Mission / Vision two-up */
.vunulu-about .vu-pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin-top: 18px;
}
.vunulu-about .vu-pillar {
    border: 1px solid var(--vu-line);
    border-radius: var(--vu-radius);
    padding: 22px;
    background: var(--vu-panel);
}
.vunulu-about .vu-pillar h3 {
    margin: 0 0 10px;
    color: var(--vu-accent);
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Timeline */
.vunulu-about .vu-timeline {
    position: relative;
    margin: 24px 0;
    padding-left: 28px;
    border-left: 2px solid var(--vu-line);
}
.vunulu-about .vu-timeline .item {
    position: relative;
    margin-bottom: 22px;
}
.vunulu-about .vu-timeline .item::before {
    content: "";
    position: absolute;
    left: -36px;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--vu-accent);
    box-shadow: 0 0 0 4px rgba(200, 162, 74, 0.18);
}
.vunulu-about .vu-timeline .item .when {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--vu-muted);
}
.vunulu-about .vu-timeline .item .what {
    font-size: 17px;
    color: var(--vu-ink);
    margin: 4px 0 4px;
}
.vunulu-about .vu-timeline .item .where {
    font-size: 13px;
    color: var(--vu-accent);
}

/* Team grid */
.vunulu-about .vu-team {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 16px;
}
.vunulu-about .vu-team .member {
    text-align: center;
    background: var(--vu-panel);
    border: 1px solid var(--vu-line);
    border-radius: var(--vu-radius);
    padding: 22px 14px;
}
.vunulu-about .vu-team .member .avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    margin: 0 auto 12px;
    background: linear-gradient(135deg, var(--vu-accent), #8a6f33);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vu-bg);
    font-weight: 700;
    font-size: 28px;
    letter-spacing: 0.08em;
}
.vunulu-about .vu-team .member .nm {
    color: var(--vu-ink);
    font-weight: 600;
    font-size: 15px;
}
.vunulu-about .vu-team .member .role {
    color: var(--vu-accent);
    font-size: 12px;
    margin-top: 4px;
}

/* CTA strip */
.vunulu-page .vu-cta {
    text-align: center;
    padding: 36px 24px;
    margin: 32px 0;
    border: 1px solid var(--vu-accent);
    border-radius: 14px;
    background: linear-gradient(180deg,
                rgba(200, 162, 74, 0.08),
                rgba(200, 162, 74, 0));
}
.vunulu-page .vu-cta h2 {
    margin: 0 0 10px;
    color: var(--vu-accent);
    font-size: 22px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.vunulu-page .vu-cta a {
    display: inline-block;
    margin-top: 14px;
    padding: 12px 22px;
    background: var(--vu-accent);
    color: var(--vu-bg);
    text-decoration: none;
    border-radius: 999px;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    transition: transform 0.2s, background 0.2s;
}
.vunulu-page .vu-cta a:hover {
    transform: translateY(-2px);
    background: #d8b25a;
}

/* --- File-based event page ---------------------------------------------- */
.vunulu-event .vu-event-titleband {
    text-align: center;
    padding: 32px 16px 8px;
    border-bottom: 1px solid var(--vu-line);
    margin-bottom: 16px;
}
.vunulu-event .vu-event-titleband h1 {
    margin: 8px 0 6px;
    font-size: 32px;
    color: var(--vu-ink);
    letter-spacing: 0.02em;
}
.vunulu-event .vu-event-titleband .lead {
    color: var(--vu-accent);
    font-style: italic;
    font-size: 17px;
    max-width: 760px;
    margin: 0 auto;
}

.vunulu-event .vu-event-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 32px;
    margin: 32px 0;
}
.vunulu-event .vu-lead-paragraph {
    font-size: 17px;
    line-height: 1.7;
    color: var(--vu-ink);
    margin: 0 0 24px;
}
.vunulu-event .vu-section-title {
    margin: 28px 0 12px;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vu-accent);
}
.vunulu-event .vu-lineup {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.vunulu-event .vu-lineup li {
    background: var(--vu-panel);
    border: 1px solid var(--vu-line);
    color: var(--vu-ink);
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px;
    transition: border-color 0.2s, color 0.2s;
}
.vunulu-event .vu-lineup li:hover {
    border-color: var(--vu-accent);
    color: var(--vu-accent);
}
.vunulu-event .vu-partners {
    list-style: none;
    padding: 0;
    margin: 0;
}
.vunulu-event .vu-partners li {
    padding: 8px 0;
    border-bottom: 1px dashed var(--vu-line);
    font-size: 14px;
    color: var(--vu-ink);
}
.vunulu-event .vu-partners li:last-child { border-bottom: 0; }
.vunulu-event .vu-partners li strong { color: var(--vu-accent); font-weight: 600; }
.vunulu-event .vu-partners li em { color: var(--vu-muted); font-style: normal; margin-left: 4px; }

.vunulu-event .vu-hashtags {
    margin-top: 24px;
    padding: 14px;
    background: rgba(200, 162, 74, 0.06);
    border-left: 3px solid var(--vu-accent);
    border-radius: 6px;
    font-size: 12px;
}
.vunulu-event .vu-hashtags span {
    display: inline-block;
    color: var(--vu-muted);
    margin-right: 10px;
    letter-spacing: 0.04em;
}

.vunulu-event .vu-event-poster {
    border: 1px solid var(--vu-line);
    border-radius: var(--vu-radius);
    overflow: hidden;
    margin-bottom: 18px;
    background: #000;
    aspect-ratio: 4 / 5;
}
.vunulu-event .vu-event-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vunulu-event .vu-event-gallery {
    margin: 36px 0;
}
.vunulu-event .vu-gallery--empty {
    background: var(--vu-panel);
    border: 1px dashed var(--vu-line);
    border-radius: var(--vu-radius);
    padding: 28px;
    text-align: center;
}
.vunulu-event .vu-empty-hint {
    color: var(--vu-muted);
    font-size: 13px;
    max-width: 640px;
    margin: 0 auto;
}
.vunulu-event .vu-empty-hint code {
    background: rgba(0, 0, 0, 0.4);
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--vu-accent);
    font-size: 11px;
    word-break: break-all;
}

.vunulu-event .vu-event-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 24px 0;
    margin: 32px 0;
    border-top: 1px solid var(--vu-line);
    border-bottom: 1px solid var(--vu-line);
}
.vunulu-event .vu-event-nav a {
    color: var(--vu-ink);
    text-decoration: none;
    transition: color 0.2s;
}
.vunulu-event .vu-event-nav a:hover { color: var(--vu-accent); }
.vunulu-event .vu-event-nav .prev { text-align: left; }
.vunulu-event .vu-event-nav .next { text-align: right; }
.vunulu-event .vu-event-nav .dir {
    display: block;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--vu-accent);
    margin-bottom: 4px;
}
.vunulu-event .vu-event-nav .name {
    font-size: 14px;
    color: var(--vu-ink);
}
.vunulu-event .vu-event-nav .all {
    padding: 9px 18px;
    border: 1px solid var(--vu-line);
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--vu-accent);
}
.vunulu-event .vu-event-nav .all:hover {
    border-color: var(--vu-accent);
    background: rgba(200, 162, 74, 0.08);
}

@media (max-width: 880px) {
    .vunulu-event .vu-event-grid { grid-template-columns: 1fr; }
    .vunulu-event .vu-event-nav { grid-template-columns: 1fr; text-align: center; }
    .vunulu-event .vu-event-nav .prev,
    .vunulu-event .vu-event-nav .next { text-align: center; }
}

/* --- Contact page -------------------------------------------------------- */
.vunulu-contact .vu-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 32px;
    margin: 32px 0;
}
.vunulu-contact .vu-contact-info {
    background: var(--vu-panel);
    border: 1px solid var(--vu-line);
    border-radius: var(--vu-radius);
    padding: 28px;
    align-self: start;
}
.vunulu-contact .vu-contact-info h2 {
    color: var(--vu-accent);
    margin: 0 0 18px;
}
.vunulu-contact .vu-contact-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}
.vunulu-contact .vu-contact-list li {
    padding: 14px 0;
    border-bottom: 1px dashed var(--vu-line);
    font-size: 15px;
}
.vunulu-contact .vu-contact-list li:last-child {
    border-bottom: 0;
}
.vunulu-contact .vu-contact-list .lbl {
    display: block;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--vu-muted);
    margin-bottom: 4px;
}
.vunulu-contact .vu-contact-list a {
    color: var(--vu-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--vu-accent);
    transition: color 0.2s;
}
.vunulu-contact .vu-contact-list a:hover {
    color: var(--vu-accent);
}

.vunulu-contact .vu-socials {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--vu-line);
}
.vunulu-contact .vu-socials h3,
.vunulu-contact .vu-pillars-mini h3 {
    margin: 0 0 12px;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vu-accent);
}
.vunulu-contact .vu-socials ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.vunulu-contact .vu-socials a {
    display: inline-block;
    padding: 7px 13px;
    border: 1px solid var(--vu-line);
    border-radius: 999px;
    color: var(--vu-ink);
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 0.04em;
    transition: all 0.2s;
}
.vunulu-contact .vu-socials a:hover {
    border-color: var(--vu-accent);
    color: var(--vu-accent);
}
.vunulu-contact .vu-pillars-mini {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--vu-line);
}
.vunulu-contact .vu-pillars-mini ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.vunulu-contact .vu-pillars-mini li {
    padding: 6px 0;
    font-size: 13px;
    color: var(--vu-ink);
    opacity: 0.92;
}
.vunulu-contact .vu-pillars-mini li strong {
    color: var(--vu-accent);
    font-weight: 600;
    margin-right: 4px;
}

/* --- Reach Vunulu card — UX polish ---------------------------------------
   The base rules above already set the brand colors and structure. This
   block refines the card's visual rhythm and interaction feel: a defined
   heading scale, a cleaner hairline divider in place of the dashed line,
   softer link underlines with a gold-on-hover treatment, social pills that
   tint on hover, a visible keyboard focus ring, and tighter list rhythm
   on the pillars block. Scoped tightly to .vunulu-contact .vu-contact-info
   (and .vu-pillars-mini) so nothing else on the site is affected.
   ------------------------------------------------------------------------ */

/* Card lift — match the contact form card's subtle elevation */
.vunulu-contact .vu-contact-info {
    padding: 32px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.32);
}

/* Section title presence */
.vunulu-contact .vu-contact-info h2,
.vunulu-contact .vu-contact-info .vu-section-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin: 0 0 22px;
    text-transform: uppercase;
}

/* Clean hairline dividers (replaces the dashed border) */
.vunulu-contact .vu-contact-list li {
    border-bottom: 1px solid var(--vu-line);
    padding: 16px 0;
}

/* Eyebrow labels — tighten letter-spacing for a sharper read */
.vunulu-contact .vu-contact-list .lbl {
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--vu-accent);   /* promote labels to gold for clearer hierarchy */
    margin-bottom: 6px;
    font-weight: 600;
}

/* Multi-line values like the address need proper leading */
.vunulu-contact .vu-contact-list li > span:not(.lbl) {
    color: var(--vu-ink);
    line-height: 1.55;
    display: block;
}

/* Email & phone links — soft underline that brightens on hover, removes
   the heavy permanent border-bottom in the original rule. */
.vunulu-contact .vu-contact-list a {
    border-bottom: 0;
    text-decoration: underline;
    text-decoration-color: rgba(200, 162, 74, 0.4);
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    color: var(--vu-ink);
    transition: color 0.2s, text-decoration-color 0.2s;
}
.vunulu-contact .vu-contact-list a:hover,
.vunulu-contact .vu-contact-list a:focus-visible {
    color: var(--vu-accent);
    text-decoration-color: var(--vu-accent);
}
.vunulu-contact .vu-contact-list a:focus-visible {
    outline: 2px solid var(--vu-accent);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Social pills — same hairline border, but fill softly on hover and
   ship a visible focus ring for keyboard users. */
.vunulu-contact .vu-socials a {
    padding: 8px 16px;
    font-weight: 500;
}
.vunulu-contact .vu-socials a:hover {
    background: rgba(200, 162, 74, 0.08);
    border-color: var(--vu-accent);
    color: var(--vu-accent);
}
.vunulu-contact .vu-socials a:focus-visible {
    outline: 2px solid var(--vu-accent);
    outline-offset: 3px;
}

/* Pillars list — give each item a touch more breathing room and a quiet
   hover lift so the four "Perform / Sponsor / Book / Press" lines feel
   scannable rather than crammed. */
.vunulu-contact .vu-pillars-mini ul {
    display: grid;
    gap: 4px;
}
.vunulu-contact .vu-pillars-mini li {
    padding: 8px 10px 8px 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--vu-ink);
    opacity: 1;                /* drop the 0.92 opacity dimming */
    border-radius: 4px;
    transition: background-color 0.2s, padding-left 0.2s;
}
.vunulu-contact .vu-pillars-mini li:hover {
    background: rgba(200, 162, 74, 0.06);
    padding-left: 10px;
}
.vunulu-contact .vu-pillars-mini li strong {
    margin-right: 6px;
    letter-spacing: 0.01em;
}

/* Subtle vertical rhythm: tighten the gap between sections inside the card */
.vunulu-contact .vu-contact-info .vu-socials,
.vunulu-contact .vu-contact-info .vu-pillars-mini {
    margin-top: 28px;
    padding-top: 24px;
}

.vunulu-contact .vu-contact-form-card {
    background: var(--vu-panel);
    border: 1px solid var(--vu-line);
    border-radius: var(--vu-radius);
    padding: 32px;
    /* Force cream ink on every descendant. Without this, CF7's generated
       <p> text inherits the parent theme's body color (#333) on the dark
       panel — about 1.48:1 contrast, well below WCAG AA's 4.5:1 minimum,
       so the form's labels and group titles render effectively invisible. */
    color: var(--vu-ink);
}
.vunulu-contact .vu-contact-form-card h2 {
    color: var(--vu-accent);
    margin: 0 0 18px;
    font-size: 22px;
}
.vunulu-contact .vu-hint {
    background: rgba(200, 162, 74, 0.08);
    border: 1px solid var(--vu-line);
    border-left: 3px solid var(--vu-accent);
    padding: 14px 16px;
    border-radius: 6px;
    color: var(--vu-ink);
    font-size: 14px;
}
.vunulu-contact .vu-hint code {
    background: rgba(0, 0, 0, 0.4);
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--vu-accent);
    font-size: 12px;
}

/* Style any common form field that lands inside the card so CF7 / WPForms /
   Forminator / Gravity all render legibly on the dark surface. */
.vunulu-contact .vu-contact-form-card input[type="text"],
.vunulu-contact .vu-contact-form-card input[type="email"],
.vunulu-contact .vu-contact-form-card input[type="tel"],
.vunulu-contact .vu-contact-form-card input[type="url"],
.vunulu-contact .vu-contact-form-card select,
.vunulu-contact .vu-contact-form-card textarea {
    width: 100%;
    background: var(--vu-bg);
    border: 1px solid var(--vu-line);
    color: var(--vu-ink);
    padding: 12px 14px;
    font-size: 14px;
    border-radius: 6px;
    margin-bottom: 14px;
    font-family: inherit;
    transition: border-color 0.2s;
}
.vunulu-contact .vu-contact-form-card input:focus,
.vunulu-contact .vu-contact-form-card select:focus,
.vunulu-contact .vu-contact-form-card textarea:focus {
    outline: none;
    border-color: var(--vu-accent);
}
.vunulu-contact .vu-contact-form-card label {
    display: block;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vu-muted);
    margin-bottom: 6px;
    margin-top: 6px;
}
.vunulu-contact .vu-contact-form-card textarea {
    min-height: 140px;
    resize: vertical;
}
.vunulu-contact .vu-contact-form-card input[type="submit"],
.vunulu-contact .vu-contact-form-card button[type="submit"],
.vunulu-contact .vu-contact-form-card .wpcf7-submit,
.vunulu-contact .vu-contact-form-card .wpforms-submit {
    background: var(--vu-accent);
    color: var(--vu-bg);
    border: 0;
    padding: 14px 26px;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}
.vunulu-contact .vu-contact-form-card input[type="submit"]:hover,
.vunulu-contact .vu-contact-form-card button[type="submit"]:hover,
.vunulu-contact .vu-contact-form-card .wpcf7-submit:hover,
.vunulu-contact .vu-contact-form-card .wpforms-submit:hover {
    transform: translateY(-2px);
    background: #d8b25a;
}

/* --- Contact Form 7 — vanilla shortcode rendering ------------------------
   page-contact.php renders [contact-form-7 …] via do_shortcode(), which
   emits <form class="wpcf7-form"> directly inside .vu-contact-form-card
   without the .vu-cf7 wrapper used by the richly-styled block further
   down in this file. CF7 also emits group titles ("Who are you?", "Why
   are you reaching out?", …) and field labels as plain text inside <p>,
   not as <label> elements. The rules below target that <p>-based markup
   so every word is legible on the dark panel and the polish (focus ring,
   placeholder color, accent-tinted checkbox, native date icon, file
   selector button, sentence-case consent label) lands without needing
   the .vu-cf7 wrapper. */

/* Paragraph text inside the CF7 form — group titles, inline labels,
   helper sentences, the closing footnote. */
.vunulu-contact .vu-contact-form-card .wpcf7-form p {
    color: var(--vu-ink);
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.6;
}

/* Group titles emitted as the first <strong> on a line */
.vunulu-contact .vu-contact-form-card .wpcf7-form p > strong:first-child {
    display: inline-block;
    color: var(--vu-accent);
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    font-weight: 700;
}

/* Required asterisks and validation hints */
.vunulu-contact .vu-contact-form-card .wpcf7-form .required,
.vunulu-contact .vu-contact-form-card .wpcf7-form .wpcf7-not-valid-tip {
    color: var(--vu-accent);
}

/* Placeholders — currently rendered near-black on near-black */
.vunulu-contact .vu-contact-form-card .wpcf7-form input::placeholder,
.vunulu-contact .vu-contact-form-card .wpcf7-form textarea::placeholder {
    color: var(--vu-muted);
    opacity: 1;
}

/* Visible focus ring matched to brand gold */
.vunulu-contact .vu-contact-form-card .wpcf7-form input:focus,
.vunulu-contact .vu-contact-form-card .wpcf7-form select:focus,
.vunulu-contact .vu-contact-form-card .wpcf7-form textarea:focus {
    box-shadow: 0 0 0 3px rgba(200, 162, 74, 0.2);
}

/* Native date-picker icon — invisible on a dark field by default */
.vunulu-contact .vu-contact-form-card .wpcf7-form input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.7) sepia(0.6) saturate(2) hue-rotate(5deg);
    opacity: 0.85;
    cursor: pointer;
}

/* Select dropdown options keep brand colors when opened */
.vunulu-contact .vu-contact-form-card .wpcf7-form select option {
    background: var(--vu-bg);
    color: var(--vu-ink);
}

/* Checkboxes (newsletter + consent) — modern accent tint, sentence case.
   Overrides the existing .vu-contact-form-card label rule that turned the
   consent line into shouty all-caps. */
.vunulu-contact .vu-contact-form-card .wpcf7-form .wpcf7-list-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 6px 0;
}
.vunulu-contact .vu-contact-form-card .wpcf7-form input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--vu-accent);
    cursor: pointer;
    flex: 0 0 18px;
}
.vunulu-contact .vu-contact-form-card .wpcf7-form .wpcf7-list-item-label {
    color: var(--vu-ink);
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.45;
}

/* File input — restyle the messy default. */
.vunulu-contact .vu-contact-form-card .wpcf7-form input[type="file"] {
    display: block;
    width: 100%;
    color: var(--vu-muted);
    background: var(--vu-bg);
    border: 1px dashed var(--vu-line);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 13px;
    cursor: pointer;
}
.vunulu-contact .vu-contact-form-card .wpcf7-form input[type="file"]::file-selector-button,
.vunulu-contact .vu-contact-form-card .wpcf7-form input[type="file"]::-webkit-file-upload-button {
    background: var(--vu-accent);
    color: var(--vu-bg);
    border: 0;
    padding: 7px 14px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    margin-right: 12px;
}

/* Closing "We typically reply within 1–2 business days…" footnote */
.vunulu-contact .vu-contact-form-card .wpcf7-form > p:last-of-type {
    color: var(--vu-muted);
    font-size: 13px;
    margin-top: 18px;
}

@media (max-width: 880px) {
    .vunulu-contact .vu-contact-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   GLOBAL NAVIGATION (site-wide) — applied via .vunulu-nav body class.
   We promote brand consistency across the parent theme's existing menu
   without rewriting the header markup.
   ========================================================================== */
:root {
    --vu-bg-global:     #0e0d0b;
    --vu-ink-global:    #f4ecd8;
    --vu-muted-global:  #b9a677;
    --vu-accent-global: #c8a24a;
    --vu-line-global:   rgba(244, 236, 216, 0.14);
}

/* Header + main menu container (parent theme uses several wrappers; we
   target the most common ones so the rule lands regardless of which
   header style the customizer is set to). */
.vunulu-nav .full-width-header,
.vunulu-nav .rs-header,
.vunulu-nav .rs-header.style1,
.vunulu-nav .rs-header.style2,
.vunulu-nav .rs-header.style3,
.vunulu-nav .rs-header.style4,
.vunulu-nav .rs-header.style5,
.vunulu-nav .rs-header.style6,
.vunulu-nav .menu-area,
.vunulu-nav .main-menu,
.vunulu-nav .menu-sticky,
.vunulu-nav .topbar-area {
    background-color: var(--vu-bg-global) !important;
    border-bottom: 1px solid var(--vu-line-global);
}

/* Top utility bar — call/email/social strip the parent theme exposes */
.vunulu-nav .topbar-area,
.vunulu-nav .topbar-area * {
    color: var(--vu-muted-global);
}
.vunulu-nav .topbar-area a {
    color: var(--vu-ink-global);
    transition: color 0.2s ease;
}
.vunulu-nav .topbar-area a:hover {
    color: var(--vu-accent-global);
}

/* Primary menu links — reset existing colours and apply brand */
.vunulu-nav .main-menu .navbar-nav > li > a,
.vunulu-nav .main-menu .nav-menu > li > a,
.vunulu-nav .rs-menu ul li a,
.vunulu-nav .menu-area .navbar-nav > li > a,
.vunulu-nav nav.rs-menu > ul > li > a,
.vunulu-nav header nav a {
    color: var(--vu-ink-global) !important;
    font-weight: 500;
    letter-spacing: 0.04em;
    transition: color 0.2s ease, background-color 0.2s ease;
    position: relative;
}

/* Hover + current-menu-item — gold colour with an animated underline */
.vunulu-nav .main-menu .navbar-nav > li > a:hover,
.vunulu-nav .main-menu .navbar-nav > li.current-menu-item > a,
.vunulu-nav .main-menu .navbar-nav > li.current_page_item > a,
.vunulu-nav .rs-menu ul li a:hover,
.vunulu-nav .rs-menu ul li.current-menu-item > a,
.vunulu-nav .rs-menu ul li.current_page_item > a,
.vunulu-nav .menu-area .navbar-nav > li > a:hover,
.vunulu-nav .menu-area .navbar-nav > li.current-menu-item > a,
.vunulu-nav nav.rs-menu > ul > li > a:hover,
.vunulu-nav nav.rs-menu > ul > li.current-menu-item > a,
.vunulu-nav header nav a:hover,
.vunulu-nav header nav .current-menu-item > a {
    color: var(--vu-accent-global) !important;
    background-color: transparent !important;
}

/* Underline animation: a 2-px gold bar that grows from centre on hover. */
.vunulu-nav .main-menu .navbar-nav > li > a::after,
.vunulu-nav .rs-menu > ul > li > a::after,
.vunulu-nav .menu-area .navbar-nav > li > a::after,
.vunulu-nav nav.rs-menu > ul > li > a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 0;
    height: 2px;
    background: var(--vu-accent-global);
    transition: width 0.25s ease, left 0.25s ease;
}
.vunulu-nav .main-menu .navbar-nav > li > a:hover::after,
.vunulu-nav .main-menu .navbar-nav > li.current-menu-item > a::after,
.vunulu-nav .main-menu .navbar-nav > li.current_page_item > a::after,
.vunulu-nav .rs-menu > ul > li > a:hover::after,
.vunulu-nav .rs-menu > ul > li.current-menu-item > a::after,
.vunulu-nav .menu-area .navbar-nav > li > a:hover::after,
.vunulu-nav .menu-area .navbar-nav > li.current-menu-item > a::after,
.vunulu-nav nav.rs-menu > ul > li > a:hover::after,
.vunulu-nav nav.rs-menu > ul > li.current-menu-item > a::after {
    width: calc(100% - 28px);
    left: 14px;
}

/* Submenu (dropdown) panels — match the dark surface */
.vunulu-nav .main-menu .navbar-nav > li .sub-menu,
.vunulu-nav .main-menu .navbar-nav > li .dropdown-menu,
.vunulu-nav .rs-menu ul.sub-menu,
.vunulu-nav nav.rs-menu .sub-menu {
    background-color: var(--vu-bg-global) !important;
    border: 1px solid var(--vu-line-global) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    padding: 6px 0;
}
.vunulu-nav .main-menu .navbar-nav > li .sub-menu li a,
.vunulu-nav .rs-menu ul.sub-menu li a,
.vunulu-nav nav.rs-menu .sub-menu li a {
    color: var(--vu-ink-global) !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(244, 236, 216, 0.06);
}
.vunulu-nav .main-menu .navbar-nav > li .sub-menu li:last-child a,
.vunulu-nav .rs-menu ul.sub-menu li:last-child a,
.vunulu-nav nav.rs-menu .sub-menu li:last-child a {
    border-bottom: 0;
}
.vunulu-nav .main-menu .navbar-nav > li .sub-menu li a:hover,
.vunulu-nav .rs-menu ul.sub-menu li a:hover,
.vunulu-nav nav.rs-menu .sub-menu li a:hover,
.vunulu-nav .main-menu .navbar-nav > li .sub-menu li.current-menu-item > a,
.vunulu-nav .rs-menu ul.sub-menu li.current-menu-item > a {
    color: var(--vu-accent-global) !important;
    background: rgba(200, 162, 74, 0.08) !important;
}

/* Header right-side icons (search, cart, off-canvas) */
.vunulu-nav .right_menu_togle,
.vunulu-nav .humburger,
.vunulu-nav .toggle-btn i,
.vunulu-nav .header-cart i,
.vunulu-nav .search-icon i {
    color: var(--vu-ink-global) !important;
    transition: color 0.2s;
}
.vunulu-nav .right_menu_togle:hover,
.vunulu-nav .humburger:hover,
.vunulu-nav .toggle-btn i:hover,
.vunulu-nav .header-cart i:hover,
.vunulu-nav .search-icon i:hover {
    color: var(--vu-accent-global) !important;
}

/* Mobile / off-canvas menu */
.vunulu-nav .right_menu_togle .canvas-menu,
.vunulu-nav .nav-menu.off-canvas-menu,
.vunulu-nav .responsive-menu {
    background: var(--vu-bg-global) !important;
}
.vunulu-nav .responsive-menu li a,
.vunulu-nav .right_menu_togle .canvas-menu a,
.vunulu-nav .nav-menu.off-canvas-menu a {
    color: var(--vu-ink-global) !important;
    border-bottom: 1px solid var(--vu-line-global) !important;
}
.vunulu-nav .responsive-menu li a:hover,
.vunulu-nav .responsive-menu li.current-menu-item > a,
.vunulu-nav .right_menu_togle .canvas-menu a:hover,
.vunulu-nav .nav-menu.off-canvas-menu a:hover {
    color: var(--vu-accent-global) !important;
}

/* Sticky header — keep the brand once it shrinks on scroll */
.vunulu-nav .menu-sticky.sticky,
.vunulu-nav .menu-area.sticky-on,
.vunulu-nav .full-width-header.sticky-on {
    background-color: rgba(14, 13, 11, 0.96) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    border-bottom: 1px solid var(--vu-accent-global);
}

/* ----- Tighter sticky-state override -----
   On the live home page the parent theme renders the stuck node as
   <div class="header-inner menu-sticky stuck sticky"> with a white-ish
   background that beats the rule above on specificity. Catch every
   permutation including .stuck and the .header-inner anchor so the
   sticky bar always renders in the brand dark + gold. */
.vunulu-nav .header-inner.stuck,
.vunulu-nav .header-inner.sticky,
.vunulu-nav .header-inner.menu-sticky,
.vunulu-nav .header-inner.menu-sticky.stuck,
.vunulu-nav .header-inner.menu-sticky.sticky,
.vunulu-nav .menu-sticky.stuck,
.vunulu-nav .sticky-wrapper > .header-inner,
.vunulu-nav .rs-header.header-style5,
.vunulu-nav .rs-header.header-style1,
.vunulu-nav .rs-header.header-style2,
.vunulu-nav .rs-header.header-style3,
.vunulu-nav .rs-header.header-style4,
.vunulu-nav .rs-header.header-style6,
.vunulu-nav header.single-header.stuck {
    background-color: #0e0d0b !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(200, 162, 74, 0.5) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55) !important;
}

/* Sticky-wrapper itself stays transparent (it's just a height placeholder) */
.vunulu-nav .sticky-wrapper {
    background-color: transparent !important;
}

/* Inner containers / row-tables / menu-areas inside the stuck header
   must be transparent so they don't paint white over the dark stuck bar. */
.vunulu-nav .header-inner.stuck > *,
.vunulu-nav .header-inner.menu-sticky > *,
.vunulu-nav .header-inner.sticky > *,
.vunulu-nav .header-inner > .container,
.vunulu-nav .header-inner > .container > *,
.vunulu-nav .menu-area.menu_type_,
.vunulu-nav .row-table,
.vunulu-nav .header-inner .container,
.vunulu-nav .header-inner .row-table {
    background-color: transparent !important;
}

/* Header link colors — cream by default, gold on hover / current */
.vunulu-nav .header-inner a,
.vunulu-nav .menu-sticky a,
.vunulu-nav header.single-header a {
    color: var(--vu-ink-global) !important;
}
.vunulu-nav .header-inner a:hover,
.vunulu-nav .menu-sticky a:hover,
.vunulu-nav header.single-header a:hover,
.vunulu-nav .header-inner .current-menu-item > a,
.vunulu-nav .header-inner .current_page_item > a {
    color: var(--vu-accent-global) !important;
}

/* ----- Canvas paint -----
   Make sure the page chrome under every Vunulu-branded body class is
   pure brand charcoal. This kills the white strips you sometimes see
   between Elementor sections, especially right under the hero and
   above the footer. */
html,
body.vunulu-nav,
body.vunulu-home,
body.vunulu-page,
body.vunulu-contact,
body.vunulu-about,
body.vunulu-portfolio-landing,
body.vunulu-event {
    background-color: #0e0d0b !important;
}
body.vunulu-home #page,
body.vunulu-home #content,
body.vunulu-home main,
body.vunulu-home .site-content,
body.vunulu-home .site,
body.vunulu-home .offwrap,
body.vunulu-page #page,
body.vunulu-page #content,
body.vunulu-page main,
body.vunulu-page .site-content,
body.vunulu-page .site {
    background-color: #0e0d0b;
}

/* ----- Header dot/icon row in the top-right (cart count, indicators) -----
   The parent theme paints these tiny dots magenta. Brand them gold so
   they read as on-purpose punctuation rather than a visual error. */
.vunulu-nav .header-cart-count,
.vunulu-nav .cart-count,
.vunulu-nav .header-cart-number,
.vunulu-nav .header-search,
.vunulu-nav .header-cart {
    color: var(--vu-ink-global) !important;
}
.vunulu-nav .header-cart-count::before,
.vunulu-nav .cart-count::before {
    background-color: var(--vu-accent-global) !important;
    color: var(--vu-bg-global) !important;
}
.vunulu-nav [class*="cart"] [style*="background-color: rgb(255, 0, 102)"],
.vunulu-nav [class*="cart"] [style*="background-color: #FF0066"],
.vunulu-nav [class*="cart"] [style*="background-color: #FA0368"],
.vunulu-nav [class*="badge"] {
    background-color: var(--vu-accent-global) !important;
    color: var(--vu-bg-global) !important;
}

/* ==========================================================================
   HEADER LAYOUT FIX — force the parent theme's absolute-positioned header
   into normal document flow so page hero text doesn't render underneath it.
   The parent KTA / Evenio theme positions .full-width-header absolutely
   over the hero (a tourism-template convention), which collides with our
   own dark page heroes.
   ========================================================================== */

/* Take the header out of absolute flow on every Vunulu-branded page */
.vunulu-page .full-width-header,
.vunulu-page .rs-header,
.vunulu-page .full-width-header.header-style1,
.vunulu-page .full-width-header.header-style2,
.vunulu-page .full-width-header.header-style3,
.vunulu-page .full-width-header.header-style4,
.vunulu-page .full-width-header.header-style5,
.vunulu-page .full-width-header.header-style6,
.vunulu-page .full-width-header.header-style7,
.vunulu-page .full-width-header.header-style8,
.vunulu-page .full-width-header.header-style9,
.vunulu-page .menu-area {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    z-index: 100;
}

/* Topbar (email · phone · address · socials row) — tidy padding + flex
   alignment so left-side info and right-side socials line up cleanly. */
.vunulu-nav .topbar-area {
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(244, 236, 216, 0.08);
    font-size: 13px;
}
.vunulu-nav .topbar-area .container,
.vunulu-nav .topbar-area > div:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.vunulu-nav .topbar-area ul,
.vunulu-nav .topbar-area .topbar-contact,
.vunulu-nav .topbar-area .topbar-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.vunulu-nav .topbar-area li,
.vunulu-nav .topbar-area .topbar-contact > * {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1.2;
}
.vunulu-nav .topbar-area i,
.vunulu-nav .topbar-area .icon {
    color: var(--vu-accent-global);
    font-size: 14px;
    margin-right: 4px;
}

/* Social icons row (right side of topbar) — gold hover, tidy spacing */
.vunulu-nav .topbar-area .topbar-right a,
.vunulu-nav .topbar-area .social-list a,
.vunulu-nav .header-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--vu-ink-global) !important;
    border: 1px solid transparent;
    transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.vunulu-nav .topbar-area .topbar-right a:hover,
.vunulu-nav .topbar-area .social-list a:hover,
.vunulu-nav .header-social a:hover {
    color: var(--vu-accent-global) !important;
    border-color: var(--vu-accent-global);
    background-color: rgba(200, 162, 74, 0.08);
}

/* Main menu row — vertical padding for breathing room around items */
.vunulu-nav .menu-area,
.vunulu-nav .full-width-header .menu-area {
    padding: 14px 0 !important;
}
.vunulu-nav .menu-area .container,
.vunulu-nav .full-width-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* Logo column — give it room and clamp the height so a tall logo
   doesn't blow up the header */
.vunulu-nav .logo-cat-img,
.vunulu-nav .logo-area img,
.vunulu-nav .navbar-brand img,
.vunulu-nav .logo-img img {
    max-height: 64px !important;
    width: auto !important;
    display: block;
}

/* Menu items — line-height + horizontal padding so the centre-out
   underline doesn't sit on top of letters */
.vunulu-nav .main-menu .navbar-nav > li > a,
.vunulu-nav .rs-menu > ul > li > a,
.vunulu-nav .menu-area .navbar-nav > li > a,
.vunulu-nav nav.rs-menu > ul > li > a {
    padding: 12px 14px !important;
    line-height: 1.4 !important;
    font-size: 14px !important;
}

/* Reposition the underline so it sits cleanly below the text, not on top */
.vunulu-nav .main-menu .navbar-nav > li > a::after,
.vunulu-nav .rs-menu > ul > li > a::after,
.vunulu-nav .menu-area .navbar-nav > li > a::after,
.vunulu-nav nav.rs-menu > ul > li > a::after {
    bottom: 4px;
}

/* ==========================================================================
   PAGE HERO CLEARANCE — make sure the dark hero starts cleanly under the
   header, regardless of which header layout the parent theme is using.
   ========================================================================== */
.vunulu-page main,
.vunulu-page .site-main {
    padding-top: 24px;
}

/* Vunulu hero blocks always start with their own internal padding */
.vunulu-page .vu-hero {
    padding-top: 32px;
    padding-bottom: 32px;
}

/* The Contact hero specifically — it had no banner image, so it was
   collapsing into the header. Give it explicit vertical breathing room. */
.vunulu-contact .vu-hero {
    min-height: 0 !important;
    padding: 56px 24px !important;
    margin-bottom: 16px;
    background: var(--vu-panel);
    border-bottom: 1px solid var(--vu-line);
}
.vunulu-contact .vu-hero .vu-overlay {
    background: transparent !important;
    padding: 0 !important;
}
.vunulu-contact .vu-hero h1 {
    margin: 8px 0 10px;
    font-size: 36px;
    letter-spacing: 0.04em;
}
.vunulu-contact .vu-hero .lead {
    max-width: 720px;
    margin: 0 auto;
}

/* Mobile — collapse the topbar items into a centred stack instead of a
   side-by-side row, keep header components readable. */
@media (max-width: 880px) {
    .vunulu-nav .topbar-area .container,
    .vunulu-nav .topbar-area > div:first-child {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
    .vunulu-nav .topbar-area ul,
    .vunulu-nav .topbar-area .topbar-contact,
    .vunulu-nav .topbar-area .topbar-right {
        gap: 14px;
        justify-content: center;
    }
    .vunulu-nav .menu-area .container,
    .vunulu-nav .full-width-header .container {
        flex-wrap: wrap;
        gap: 8px;
    }
    .vunulu-contact .vu-hero {
        padding: 40px 16px !important;
    }
    .vunulu-contact .vu-hero h1 {
        font-size: 26px;
    }
}

/* ==========================================================================
   CONTACT FORM 7 — Vunulu rich form
   Fieldsets, two-column rows, custom select, file input, validation states.
   Activated by the .vu-cf7 wrapper that the form HTML provides.
   ========================================================================== */

.vunulu-contact .vu-cf7 {
    --vu-cf7-line: rgba(244, 236, 216, 0.14);
}

.vunulu-contact .vu-cf7 .vu-fset {
    border: 1px solid var(--vu-cf7-line);
    border-radius: 10px;
    padding: 22px 24px 6px;
    margin: 0 0 22px;
    background: rgba(0, 0, 0, 0.18);
}
.vunulu-contact .vu-cf7 .vu-fset legend {
    color: var(--vu-accent);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0 10px;
    margin-left: -2px;
    background: var(--vu-panel);
    border: 1px solid var(--vu-cf7-line);
    border-radius: 999px;
}

.vunulu-contact .vu-cf7 .vu-row {
    display: grid;
    gap: 16px;
    margin-bottom: 4px;
}
.vunulu-contact .vu-cf7 .vu-row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 720px) {
    .vunulu-contact .vu-cf7 .vu-row--2 {
        grid-template-columns: 1fr;
    }
}

.vunulu-contact .vu-cf7 .vu-label {
    display: block;
    margin-bottom: 16px;
}
.vunulu-contact .vu-cf7 .vu-label-txt {
    display: block;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--vu-muted);
    margin-bottom: 6px;
    font-weight: 600;
}
.vunulu-contact .vu-cf7 .vu-label-txt em {
    color: var(--vu-accent);
    font-style: normal;
    margin-left: 4px;
}

/* CF7 wraps every field in a <span class="wpcf7-form-control-wrap">.
   Make that wrap fill the label so inputs always 100 % width inside it. */
.vunulu-contact .vu-cf7 .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* All input types — already inherit the dark-form base rules from the
   contact-form-card, but we re-state here for stronger specificity inside
   .vu-cf7 so field rendering is uniform. */
.vunulu-contact .vu-cf7 input[type="text"],
.vunulu-contact .vu-cf7 input[type="email"],
.vunulu-contact .vu-cf7 input[type="tel"],
.vunulu-contact .vu-cf7 input[type="url"],
.vunulu-contact .vu-cf7 input[type="number"],
.vunulu-contact .vu-cf7 input[type="date"],
.vunulu-contact .vu-cf7 select,
.vunulu-contact .vu-cf7 textarea {
    width: 100%;
    background: var(--vu-bg);
    border: 1px solid var(--vu-cf7-line);
    color: var(--vu-ink);
    padding: 11px 14px;
    font-size: 14px;
    border-radius: 6px;
    margin: 0;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
    appearance: none;
}
.vunulu-contact .vu-cf7 input:focus,
.vunulu-contact .vu-cf7 select:focus,
.vunulu-contact .vu-cf7 textarea:focus {
    outline: none;
    border-color: var(--vu-accent);
    box-shadow: 0 0 0 3px rgba(200, 162, 74, 0.18);
}
.vunulu-contact .vu-cf7 input::placeholder,
.vunulu-contact .vu-cf7 textarea::placeholder {
    color: rgba(244, 236, 216, 0.35);
}

/* Date input — Webkit calendar icon tinting */
.vunulu-contact .vu-cf7 input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.7) sepia(0.6) saturate(2) hue-rotate(5deg);
    cursor: pointer;
}

/* Custom select arrow (since we removed the native one with appearance:none) */
.vunulu-contact .vu-cf7 select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23c8a24a' d='M0 0l5 6 5-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 10px 6px;
    padding-right: 36px;
}
.vunulu-contact .vu-cf7 select option {
    background: var(--vu-bg);
    color: var(--vu-ink);
}

/* Textareas */
.vunulu-contact .vu-cf7 textarea {
    min-height: 140px;
    resize: vertical;
    line-height: 1.55;
}

/* File input — restyle the messy default */
.vunulu-contact .vu-cf7 .vu-label--file input[type="file"] {
    display: block;
    width: 100%;
    padding: 12px;
    background: var(--vu-bg);
    border: 1px dashed var(--vu-accent);
    border-radius: 8px;
    color: var(--vu-muted);
    font-size: 13px;
    cursor: pointer;
}
.vunulu-contact .vu-cf7 .vu-label--file input[type="file"]::-webkit-file-upload-button {
    background: var(--vu-accent);
    color: var(--vu-bg);
    border: 0;
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    margin-right: 12px;
}

/* Checkbox + acceptance — bigger hit target, gold tick */
.vunulu-contact .vu-cf7 .wpcf7-checkbox,
.vunulu-contact .vu-cf7 .wpcf7-acceptance {
    display: block;
    margin: 6px 0 14px;
}
.vunulu-contact .vu-cf7 .wpcf7-list-item {
    margin: 0 0 8px !important;
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
}
.vunulu-contact .vu-cf7 .wpcf7-list-item-label {
    color: var(--vu-ink);
    font-size: 13px;
    line-height: 1.5;
}
.vunulu-contact .vu-cf7 .wpcf7-list-item-label em {
    color: var(--vu-accent);
    font-style: normal;
}
.vunulu-contact .vu-cf7 input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin: 1px 0 0;
    border: 1px solid var(--vu-cf7-line);
    border-radius: 4px;
    background: var(--vu-bg);
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    position: relative;
}
.vunulu-contact .vu-cf7 input[type="checkbox"]:hover {
    border-color: var(--vu-accent);
}
.vunulu-contact .vu-cf7 input[type="checkbox"]:checked {
    background: var(--vu-accent);
    border-color: var(--vu-accent);
}
.vunulu-contact .vu-cf7 input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid var(--vu-bg);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Submit row + button */
.vunulu-contact .vu-cf7 .vu-submit-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
}
.vunulu-contact .vu-cf7 .vu-cf7-submit,
.vunulu-contact .vu-cf7 input.wpcf7-submit {
    background: var(--vu-accent) !important;
    color: var(--vu-bg) !important;
    border: 0;
    padding: 14px 28px !important;
    font-size: 13px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 6px 16px rgba(200, 162, 74, 0.25);
}
.vunulu-contact .vu-cf7 .vu-cf7-submit:hover,
.vunulu-contact .vu-cf7 input.wpcf7-submit:hover {
    transform: translateY(-2px);
    background: #d8b25a !important;
    box-shadow: 0 10px 24px rgba(200, 162, 74, 0.3);
}
.vunulu-contact .vu-cf7 .vu-submit-hint {
    font-size: 12px;
    color: var(--vu-muted);
}

/* CF7 AJAX response messages — re-skin the default colours */
.vunulu-contact .wpcf7-response-output {
    margin: 18px 0 0 !important;
    padding: 14px 18px !important;
    border-radius: 6px !important;
    border: 1px solid var(--vu-cf7-line) !important;
    background: var(--vu-bg) !important;
    color: var(--vu-ink) !important;
    font-size: 14px;
}
.vunulu-contact .wpcf7 form.sent .wpcf7-response-output {
    border-color: #2a8a4a !important;
    background: rgba(42, 138, 74, 0.12) !important;
    color: #d6f0d2 !important;
}
.vunulu-contact .wpcf7 form.failed .wpcf7-response-output,
.vunulu-contact .wpcf7 form.aborted .wpcf7-response-output {
    border-color: #c2454e !important;
    background: rgba(194, 69, 78, 0.12) !important;
    color: #f5c4c8 !important;
}
.vunulu-contact .wpcf7 form.invalid .wpcf7-response-output,
.vunulu-contact .wpcf7 form.unaccepted .wpcf7-response-output {
    border-color: var(--vu-accent) !important;
    background: rgba(200, 162, 74, 0.10) !important;
    color: var(--vu-ink) !important;
}

/* Per-field "this is required" tooltip */
.vunulu-contact .wpcf7-not-valid-tip {
    color: #f5c4c8 !important;
    font-size: 12px !important;
    margin-top: 4px;
}
.vunulu-contact .vu-cf7 input.wpcf7-not-valid,
.vunulu-contact .vu-cf7 select.wpcf7-not-valid,
.vunulu-contact .vu-cf7 textarea.wpcf7-not-valid {
    border-color: #c2454e !important;
    box-shadow: 0 0 0 3px rgba(194, 69, 78, 0.18) !important;
}

/* AJAX loader spinner */
.vunulu-contact .wpcf7-spinner {
    background-color: var(--vu-accent) !important;
}

/* Honeypot / disabled submit */
.vunulu-contact .vu-cf7 input.wpcf7-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* ==========================================================================
   .vu-header-wrap — class-scoped header rules (added by inc/header-wrapper.php)
   These supplement the earlier !important rules and let us layer in stronger
   styling without specificity wars.
   ========================================================================== */

/* The wrap itself — clean container the page hero sits beneath */
.vu-header-wrap {
    position: relative;
    z-index: 100;
    background-color: var(--vu-bg-global);
    border-bottom: 1px solid var(--vu-line-global);
}

/* Headers inside the wrap are forced into normal flow regardless of the
   parent theme's customiser setting. */
.vu-header-wrap .full-width-header,
.vu-header-wrap .rs-header,
.vu-header-wrap .menu-area,
.vu-header-wrap header[role="banner"] {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    background-color: var(--vu-bg-global);
}

/* ==========================================================================
   STICKY HEADER — when the user scrolls past the topbar, the JS adds
   .is-stuck to .vu-header-wrap. We give it a solid (not translucent)
   dark band so menu wording stays sharply readable on any background.
   ========================================================================== */

.vu-header-wrap.is-stuck {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #0e0d0b;                 /* solid dark, no rgba */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
    border-bottom: 1px solid var(--vu-accent-global);
    animation: vu-header-slide-down 0.25s ease-out;
}
.vu-header-wrap.is-stuck .topbar-area {
    display: none;                              /* hide the topbar when stuck — keep nav focused */
}
.vu-header-wrap.is-stuck .menu-area {
    padding: 8px 0 !important;                  /* tighten on scroll */
    background-color: #0e0d0b !important;
}
@keyframes vu-header-slide-down {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

/* When the wrap is stuck, give the document body a top spacer so the
   page content doesn't suddenly jump up. JS could measure this dynamically
   but a fixed 70px is close enough for the parent's compact menu row. */
body.vunulu-nav.has-stuck-header { padding-top: 70px; }

/* ==========================================================================
   MENU READABILITY — bigger, weightier, higher-contrast wording on
   desktop / laptop. Mobile retains its previous sizing.
   ========================================================================== */

@media (min-width: 1024px) {
    .vu-header-wrap .main-menu .navbar-nav > li > a,
    .vu-header-wrap .rs-menu > ul > li > a,
    .vu-header-wrap .menu-area .navbar-nav > li > a,
    .vu-header-wrap nav.rs-menu > ul > li > a {
        font-size: 15px !important;             /* up from 14 */
        font-weight: 600 !important;            /* up from 500 */
        letter-spacing: 0.05em !important;
        color: #f4ecd8 !important;              /* explicit cream — no inheritance ambiguity */
        padding: 14px 16px !important;
        line-height: 1.4 !important;
    }

    /* Hover/active wording — gold with the underline animation already
       defined further up in this stylesheet. */
    .vu-header-wrap .main-menu .navbar-nav > li > a:hover,
    .vu-header-wrap .main-menu .navbar-nav > li.current-menu-item > a,
    .vu-header-wrap .main-menu .navbar-nav > li.current_page_item > a,
    .vu-header-wrap .rs-menu > ul > li > a:hover,
    .vu-header-wrap .rs-menu > ul > li.current-menu-item > a,
    .vu-header-wrap .menu-area .navbar-nav > li > a:hover,
    .vu-header-wrap .menu-area .navbar-nav > li.current-menu-item > a,
    .vu-header-wrap nav.rs-menu > ul > li > a:hover,
    .vu-header-wrap nav.rs-menu > ul > li.current-menu-item > a {
        color: var(--vu-accent-global) !important;
    }
}

/* ==========================================================================
   DESKTOP-ONLY HERO SPACING — the contact issue happens specifically on
   desktop & laptop where the absolute-positioned header overlaps the
   hero. Mobile already stacks correctly. Scope these rules accordingly.
   ========================================================================== */

@media (min-width: 1024px) {

    /* Contact page — the page that prompted this fix. Solid panel-coloured
       hero band with generous padding so the headline sits centred between
       the header and the body content. The headline was getting clipped
       at top, so we bump padding-top significantly and add explicit
       overflow:visible on the hero/overlay containers as belt-and-braces. */
    .vunulu-contact main.site-main {
        padding-top: 32px;                       /* push the hero away from the header */
        overflow: visible;
    }
    .vunulu-contact .vu-hero {
        margin-top: 16px;
        padding: 110px 24px 70px !important;     /* was 88/56 — more room for the H1 */
        background: var(--vu-panel);
        border-bottom: 1px solid var(--vu-line);
        text-align: center;
        overflow: visible;
        min-height: 0 !important;
    }
    .vunulu-contact .vu-hero .vu-overlay {
        position: relative !important;
        background: transparent !important;
        padding: 0 !important;
        overflow: visible;
    }
    .vunulu-contact .vu-hero .vu-eyebrow {
        display: block;
        margin-bottom: 20px;
    }
    .vunulu-contact .vu-hero h1 {
        font-size: 44px;
        line-height: 1.15;                       /* was implicit ~1.0 — caused the clip */
        letter-spacing: 0.04em;
        margin: 18px auto 18px;
        padding: 4px 0;                          /* a few extra px so cap-letters never touch the box edge */
    }
    .vunulu-contact .vu-hero .lead {
        max-width: 720px;
        margin: 0 auto;
        font-size: 17px;
        line-height: 1.55;
    }

    /* Portfolio landing — keep the festival hero banner fully visible */
    .vunulu-portfolio-landing main.site-main { padding-top: 16px; }
    .vunulu-portfolio-landing .vu-hero { margin-top: 0; }

    /* About page — illustrated banner sits cleanly under the header */
    .vunulu-about main.site-main { padding-top: 16px; }
    .vunulu-about .vu-hero { margin-top: 0; }

    /* Single event — same hero treatment */
    .vunulu-event main.site-main { padding-top: 16px; }
    .vunulu-event .vu-hero { margin-top: 0; }

    /* Home page — when the Elementor home is in use, ensure its first
       section starts below the header rather than under it. */
    .vunulu-home .elementor-section:first-of-type {
        margin-top: 0;
    }
}

/* ==========================================================================
   PARENT-INLINE OVERRIDES — a few rules where the parent theme injects
   inline styles. !important is the cheapest way to outweigh those.
   ========================================================================== */

/* Some parent header styles set color via inline style attribute on links;
   force readability on every variant. */
.vu-header-wrap a[style*="color"]:not(.elementor-button) {
    color: inherit !important;
}

/* Parent topbar may use a coloured background; we want it dark. */
.vu-header-wrap .topbar-area,
.vu-header-wrap .topbar-area * {
    background-color: transparent !important;
}
.vu-header-wrap .topbar-area {
    background-color: var(--vu-bg-global) !important;
}

/* ==========================================================================
   HOME PAGE — bring the existing Elementor layout into the Vunulu palette.
   Scoped to .vunulu-home so editing other pages stays unaffected.
   ========================================================================== */
.vunulu-home {
    --vu-bg-global:     #0e0d0b;
    --vu-ink-global:    #f4ecd8;
    --vu-muted-global:  #b9a677;
    --vu-accent-global: #c8a24a;
    background-color: var(--vu-bg-global);
}

/* The page itself. Most Elementor sections render with white default
   backgrounds; we replace those with the brand surfaces. */
.vunulu-home .elementor-section,
.vunulu-home .elementor-section.elementor-section-content-middle,
.vunulu-home .elementor-element-populated {
    background-color: transparent;
}
.vunulu-home main,
.vunulu-home #content,
.vunulu-home .site-content,
.vunulu-home .container > .row {
    background-color: transparent;
}

/* --- Home hero -------------------------------------------------------- */
/* The hero photo currently shows the eyebrow + paragraph in a hard-to-read
   blue. We darken the photo with an overlay and rebrand the text. */
.vunulu-home .elementor-section:first-of-type::before,
.vunulu-home .home-hero::before,
.vunulu-home .hero-section::before {
    /* Optional darken layer — only kicks in if you add the .home-hero class
       to the hero section, otherwise the rule is dormant. */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
                rgba(14, 13, 11, 0.45) 0%,
                rgba(14, 13, 11, 0.25) 35%,
                rgba(14, 13, 11, 0.78) 100%);
    pointer-events: none;
    z-index: 1;
}
.vunulu-home .elementor-section:first-of-type > .elementor-container,
.vunulu-home .home-hero > .elementor-container {
    position: relative;
    z-index: 2;
}

/* Hero eyebrow + heading + paragraph: re-skin to ink/cream + gold */
.vunulu-home .elementor-section:first-of-type .elementor-heading-title,
.vunulu-home .elementor-section:first-of-type h1,
.vunulu-home .elementor-section:first-of-type h2,
.vunulu-home .elementor-section:first-of-type p {
    color: var(--vu-ink-global) !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}
.vunulu-home .elementor-section:first-of-type .elementor-heading-title strong,
.vunulu-home .elementor-section:first-of-type .elementor-heading-title em,
.vunulu-home .elementor-section:first-of-type .vu-eyebrow,
.vunulu-home .elementor-section:first-of-type .eyebrow {
    color: var(--vu-accent-global) !important;
}

/* --- Pink → Gold button override (Purchase Ticket and similar CTAs) -- */
/* We catch every common WordPress / Elementor / WooCommerce button
   selector and re-paint to Vunulu gold. Any button with a hot-pink
   inline style is overridden via the higher-specificity class chain. */
.vunulu-home .elementor-button,
.vunulu-home .elementor-button-link,
.vunulu-home a.button,
.vunulu-home button.button,
.vunulu-home input[type="submit"],
.vunulu-home .wp-block-button__link,
.vunulu-home .woocommerce a.button,
.vunulu-home .woocommerce button.button,
.vunulu-home .woocommerce-page button.button,
.vunulu-home .woocommerce #respond input#submit,
.vunulu-home .ticket-btn,
.vunulu-home .purchase-ticket {
    background-color: var(--vu-accent-global) !important;
    background-image: none !important;
    color: var(--vu-bg-global) !important;
    border: 0 !important;
    padding: 12px 26px !important;
    font-size: 13px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
    transition: transform 0.2s, background-color 0.2s !important;
    box-shadow: 0 6px 16px rgba(200, 162, 74, 0.25);
}
.vunulu-home .elementor-button:hover,
.vunulu-home .elementor-button-link:hover,
.vunulu-home a.button:hover,
.vunulu-home button.button:hover,
.vunulu-home input[type="submit"]:hover,
.vunulu-home .wp-block-button__link:hover,
.vunulu-home .woocommerce a.button:hover,
.vunulu-home .woocommerce button.button:hover,
.vunulu-home .ticket-btn:hover,
.vunulu-home .purchase-ticket:hover {
    background-color: #d8b25a !important;
    transform: translateY(-2px);
    color: var(--vu-bg-global) !important;
}

/* --- Pink icon strip → gold ----------------------------------------- */
/* Elementor renders strip icons either as <svg> or <i class="..."> with
   colour set by the Elementor control. We override both. */
.vunulu-home .elementor-icon,
.vunulu-home .elementor-icon i,
.vunulu-home .elementor-icon svg {
    color: var(--vu-accent-global) !important;
    fill: var(--vu-accent-global) !important;
    stroke: var(--vu-accent-global) !important;
    transition: transform 0.25s, color 0.2s, fill 0.2s;
}
.vunulu-home .elementor-icon-list-icon i,
.vunulu-home .elementor-icon-list-icon svg {
    color: var(--vu-accent-global) !important;
    fill: var(--vu-accent-global) !important;
}
.vunulu-home .elementor-icon-box-wrapper:hover .elementor-icon {
    transform: translateY(-3px) scale(1.05);
}

/* --- Music release / featured cards (white background → dark panel) -- */
.vunulu-home .elementor-section.cards-section .elementor-column,
.vunulu-home .home-feature-card,
.vunulu-home .elementor-image-box-wrapper,
.vunulu-home .featured-release {
    background: var(--vu-bg-global);
}
.vunulu-home .home-feature-card,
.vunulu-home .featured-release {
    border: 1px solid var(--vu-line-global);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.25s ease, border-color 0.2s, box-shadow 0.25s;
}
.vunulu-home .home-feature-card:hover,
.vunulu-home .featured-release:hover {
    transform: translateY(-4px);
    border-color: var(--vu-accent-global);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}

/* --- Section titles ("-OUR SHOP-", "Merchandise") ----------------------- */
.vunulu-home .elementor-section h2.elementor-heading-title,
.vunulu-home .elementor-section h3.elementor-heading-title {
    color: var(--vu-ink-global) !important;
}
.vunulu-home .section-title-eyebrow,
.vunulu-home .elementor-heading-title small {
    color: var(--vu-accent-global) !important;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* --- Merchandise grid (WooCommerce product cards) ---------------------- */
.vunulu-home ul.products li.product,
.vunulu-home .woocommerce ul.products li.product {
    background: var(--vu-bg-global);
    border: 1px solid var(--vu-line-global);
    border-radius: 10px;
    padding: 14px;
    transition: transform 0.25s ease, border-color 0.2s, box-shadow 0.25s;
}
.vunulu-home ul.products li.product:hover,
.vunulu-home .woocommerce ul.products li.product:hover {
    transform: translateY(-4px);
    border-color: var(--vu-accent-global);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}
.vunulu-home ul.products li.product a img,
.vunulu-home .woocommerce ul.products li.product a img {
    border-radius: 8px;
}
.vunulu-home ul.products li.product .woocommerce-loop-product__title,
.vunulu-home ul.products li.product h2,
.vunulu-home ul.products li.product h3 {
    color: var(--vu-ink-global) !important;
    font-size: 15px !important;
    margin: 12px 0 6px !important;
}
.vunulu-home ul.products li.product .price,
.vunulu-home .woocommerce ul.products li.product .price {
    color: var(--vu-accent-global) !important;
    font-weight: 600;
}

/* WooCommerce add-to-cart on home grid */
.vunulu-home .woocommerce ul.products li.product .button,
.vunulu-home ul.products li.product .button {
    background-color: var(--vu-accent-global) !important;
    color: var(--vu-bg-global) !important;
    border-radius: 999px !important;
    padding: 9px 18px !important;
    font-size: 12px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}

/* Footer link hover (kept; the deeper footer rules live in the FOOTER block below) */
.vunulu-home footer a:hover,
.vunulu-home .footer a:hover,
.vunulu-home .footer-area a:hover {
    color: var(--vu-accent-global) !important;
}

/* ==========================================================================
   HOMEPAGE — landing hero, stats, eyebrows, carousel polish, pink-purge
   The Elementor home page on vunulu.co.ke ships with: an empty grey
   first section, three pink-pink-pink leftovers from the stock theme
   (Purchase Ticket button, stats icons, "OUR SHOP" eyebrow,
   "Merchandise" heading, "Shamz Media" credit), and a parent-theme
   footer with white H3s on a crowd-photo background. The block below
   patches all of that without touching Elementor data.
   ========================================================================== */

/* ----- Hero: inject the brand banner into the empty first section ------ */
.vunulu-home .elementor-section.elementor-top-section:first-of-type {
    min-height: 600px !important;
    background-color: var(--vu-bg-global) !important;
    background-image: url('assets/landing-hero.svg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    box-shadow: none !important;
}
@media (max-width: 1024px) {
    .vunulu-home .elementor-section.elementor-top-section:first-of-type {
        min-height: 460px !important;
    }
}
@media (max-width: 640px) {
    .vunulu-home .elementor-section.elementor-top-section:first-of-type {
        min-height: 360px !important;
        background-position: center right;
    }
}

/* Knock out the half-opaque white inline that Elementor paints on
   sections so the body's dark base shows through cleanly. */
.vunulu-home .elementor-section[style*="background-color"],
.vunulu-home .elementor-element-populated[style*="background-color"] {
    background-color: transparent !important;
}

/* ----- Stats strip ("53+ Performances" etc.) --------------------------- */
.vunulu-home .elementor-counter-number-wrapper,
.vunulu-home .elementor-counter-number,
.vunulu-home .elementor-counter-number-prefix,
.vunulu-home .elementor-counter-number-suffix {
    color: var(--vu-ink-global) !important;
    font-weight: 700;
}
.vunulu-home .elementor-counter-title {
    color: var(--vu-muted-global) !important;
    font-size: 13px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    margin-top: 6px;
}

/* ----- Section eyebrows (".title-inner .sub-text", -OUR SHOP- style) --- */
.vunulu-home .title-inner .sub-text,
.vunulu-home .sec-title .sub-text,
.vunulu-home .section-title .sub-text,
.vunulu-home .sub-text {
    color: var(--vu-accent-global) !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
}

/* ----- Catch every inline-styled pink/magenta the parent theme ships --- */
.vunulu-home [style*="#FF0066"],
.vunulu-home [style*="#ff0066"],
.vunulu-home [style*="rgb(255, 0, 102)"],
.vunulu-home [style*="rgb(255,0,102)"],
.vunulu-home [style*="#FA0368"],
.vunulu-home [style*="#fa0368"],
.vunulu-home [style*="rgb(250, 3, 104)"],
.vunulu-home [style*="rgb(250,3,104)"] {
    color: var(--vu-accent-global) !important;
    fill: var(--vu-accent-global) !important;
    stroke: var(--vu-accent-global) !important;
}
.vunulu-home [style*="background-color: #FF0066"],
.vunulu-home [style*="background-color: #ff0066"],
.vunulu-home [style*="background-color: rgb(255, 0, 102)"],
.vunulu-home [style*="background-color: #FA0368"],
.vunulu-home [style*="background-color: #fa0368"] {
    background-color: var(--vu-accent-global) !important;
    background-image: none !important;
    color: var(--vu-bg-global) !important;
}

/* ----- Music-release carousel polish (Swiper) -------------------------- */
.vunulu-home .swiper,
.vunulu-home .elementor-image-carousel-wrapper {
    padding: 6px 0 28px;
}
.vunulu-home .swiper-slide,
.vunulu-home .swiper-slide img {
    border-radius: 12px;
    overflow: hidden;
}
.vunulu-home .swiper-slide {
    border: 1px solid var(--vu-line-global);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
}

/* Carousel arrows — rebuild as gold pills on dark */
.vunulu-home .elementor-swiper-button,
.vunulu-home .swiper-button-prev,
.vunulu-home .swiper-button-next,
.vunulu-home .elementor-swiper-button-prev,
.vunulu-home .elementor-swiper-button-next {
    width: 44px !important;
    height: 44px !important;
    background: rgba(14, 13, 11, 0.7) !important;
    border: 1px solid var(--vu-accent-global) !important;
    border-radius: 50% !important;
    color: var(--vu-accent-global) !important;
    transition: all 0.2s;
}
.vunulu-home .elementor-swiper-button:hover,
.vunulu-home .swiper-button-prev:hover,
.vunulu-home .swiper-button-next:hover {
    background: var(--vu-accent-global) !important;
    color: var(--vu-bg-global) !important;
}
.vunulu-home .swiper-button-prev::after,
.vunulu-home .swiper-button-next::after {
    font-size: 16px !important;
    font-weight: 700;
}

/* Pagination bullets */
.vunulu-home .swiper-pagination-bullet {
    background: var(--vu-line-global) !important;
    opacity: 1;
}
.vunulu-home .swiper-pagination-bullet-active {
    background: var(--vu-accent-global) !important;
}

/* ==========================================================================
   FOOTER — site-wide brand pass on .rs-footer (parent theme footer).
   Currently a white-background block with a dark crowd-photo and pure
   white H3s ("Address", "Contact", "Follow Us") + a hot-pink "Shamz Media"
   credit. Replaced with full dark panel, gold headings, cream body, gold
   links, gold-on-dark social pills. Not scoped to .vunulu-home so the
   brand footer applies on every page.
   ========================================================================== */

.rs-footer,
.rs-footer.footer-style-1 {
    background-color: #0e0d0b !important;
    color: #f4ecd8;
    position: relative;
}
.rs-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 13, 11, 0.78) 0%, rgba(14, 13, 11, 0.94) 100%);
    pointer-events: none;
    z-index: 0;
}
.rs-footer > *,
.rs-footer .container,
.rs-footer .footer-top,
.rs-footer .footer-bottom {
    position: relative;
    z-index: 1;
}

/* Headings: "Address", "Contact", "Follow Us" → gold */
.rs-footer h1,
.rs-footer h2,
.rs-footer h3,
.rs-footer h4,
.rs-footer h5,
.rs-footer .widget-title,
.rs-footer .footer-title {
    color: #c8a24a !important;
    letter-spacing: 0.05em;
    font-size: 15px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

/* Body text + list items → cream */
.rs-footer p,
.rs-footer li,
.rs-footer .widget li,
.rs-footer .widget p,
.rs-footer .footer-address,
.rs-footer .footer-contact li,
.rs-footer address {
    color: #f4ecd8 !important;
    font-size: 14px;
    line-height: 1.65;
}

/* Links — cream by default, gold on hover */
.rs-footer a {
    color: #f4ecd8;
    text-decoration: none;
    transition: color 0.2s;
}
.rs-footer a:hover,
.rs-footer a:focus-visible {
    color: #c8a24a;
}

/* Footer contact icons (envelope, phone, location pin) → brand gold */
.rs-footer .icon-info i,
.rs-footer .icon-info svg,
.rs-footer .footer-contact i,
.rs-footer .footer-contact svg,
.rs-footer .contact-info i,
.rs-footer .contact-info svg,
.rs-footer .info-icon i,
.rs-footer .info-icon svg {
    color: #c8a24a !important;
    fill: #c8a24a !important;
    margin-right: 12px;
}

/* Social icons — circular gold-bordered pills, fill on hover */
.rs-footer .footer-social,
.rs-footer .social-icons,
.rs-footer .footer-share {
    display: flex;
    gap: 10px;
    margin-top: 4px;
    list-style: none;
    padding: 0;
}
.rs-footer .footer-social a,
.rs-footer .social-icons a,
.rs-footer .footer-share a {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(244, 236, 216, 0.22);
    color: #f4ecd8;
    transition: all 0.2s;
    background: transparent;
}
.rs-footer .footer-social a:hover,
.rs-footer .social-icons a:hover,
.rs-footer .footer-share a:hover {
    background: #c8a24a;
    border-color: #c8a24a;
    color: #0e0d0b;
    transform: translateY(-2px);
}

/* Footer logo column */
.rs-footer .footer-logo img,
.rs-footer .logo img {
    max-width: 140px;
    height: auto;
    margin-bottom: 14px;
}

/* Bottom bar / copyright */
.rs-footer .footer-bottom,
.rs-footer .copy-right,
.rs-footer .copyright,
.rs-footer .bottom-area {
    margin-top: 28px;
    padding: 22px 0 18px;
    border-top: 1px solid rgba(244, 236, 216, 0.14);
    color: #b9a677;
    font-size: 13px;
    letter-spacing: 0.02em;
    text-align: center;
}
.rs-footer .footer-bottom a,
.rs-footer .copy-right a,
.rs-footer .copyright a,
.rs-footer .bottom-area a {
    color: #c8a24a;
    font-weight: 600;
}

/* Override the hot-pink "Shamz Media" credit explicitly. */
.rs-footer a[href*="shamzmedia"],
.rs-footer .copy-right a[style*="color"] {
    color: #c8a24a !important;
}

/* Newsletter / subscribe form, if the footer has one */
.rs-footer .newsletter input[type="email"],
.rs-footer .newsletter input[type="text"],
.rs-footer form input[type="email"] {
    background: #15140f;
    border: 1px solid rgba(244, 236, 216, 0.18);
    color: #f4ecd8;
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 13px;
}
.rs-footer .newsletter button,
.rs-footer form button[type="submit"] {
    background: #c8a24a;
    color: #0e0d0b;
    border: 0;
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
}

/* --- Responsive trims ---------------------------------------------------- */
@media (max-width: 768px) {
    .vunulu-page .vu-hero h1 { font-size: 26px; }
    .vunulu-about .vu-section h2 { font-size: 22px; }
    .vunulu-page .vu-card .info .t { font-size: 16px; }

    /* Mobile menu items get a bit more breathing room */
    .vunulu-nav .responsive-menu li a {
        padding: 14px 18px !important;
        font-size: 15px !important;
    }
}oter with white H3s on a crowd-photo background. The block below
   patches all of that without touching Elementor data.
   ========================================================================== */

/* ----- Hero: inject the brand banner into the empty first section ------ */
.vunulu-home .elementor-section.elementor-top-section:first-of-type {
    min-height: 600px !important;
    background-color: var(--vu-bg-global) !important;
    background-image: url('assets/landing-hero.svg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    /* Strip the half-opaque white that Elementor inlines on this section */
    box-shadow: none !important;
}
@media (max-width: 1024px) {
    .vunulu-home .elementor-section.elementor-top-section:first-of-type {
        min-height: 460px !important;
    }
}
@media (max-width: 640px) {
    .vunulu-home .elementor-section.elementor-top-section:first-of-type {
        min-height: 360px !important;
        background-position: center right;
    }
}

/* Knock out the 47%-white inline that Elementor was painting on every
   section so the body's dark base shows through cleanly. */
.vunulu-home .elementor-section[style*="background-color"],
.vunulu-home .elementor-element-populated[style*="background-color"] {
    background-color: transparent !important;
}

/* ----- Stats strip ("53+ Performances" etc.) --------------------------- */
.vunulu-home .elementor-counter-number-wrapper,
.vunulu-home .elementor-counter-number,
.vunulu-home .elementor-counter-number-prefix,
.vunulu-home .elementor-counter-number-suffix {
    color: var(--vu-ink-global) !important;
    font-weight: 700;
}
.vunulu-home .elementor-counter-title {
    color: var(--vu-muted-global) !important;
    font-size: 13px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    margin-top: 6px;
}

/* ----- Section eyebrows (".title-inner .sub-text", -OUR SHOP- style) --- */
.vunulu-home .title-inner .sub-text,
.vunulu-home .sec-title .sub-text,
.vunulu-home .section-title .sub-text,
.vunulu-home .sub-text {
    color: var(--vu-accent-global) !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
}

/* ----- Catch every inline-styled pink/magenta the parent theme ships --- */
/* Hot pink (#FF0066) and magenta (#FA0368) are inlined on individual
   elements — buttons, icon strokes, sub-text. These selectors find them
   regardless of which Elementor widget they're attached to. */
.vunulu-home [style*="#FF0066"],
.vunulu-home [style*="#ff0066"],
.vunulu-home [style*="rgb(255, 0, 102)"],
.vunulu-home [style*="rgb(255,0,102)"],
.vunulu-home [style*="#FA0368"],
.vunulu-home [style*="#fa0368"],
.vunulu-home [style*="rgb(250, 3, 104)"],
.vunulu-home [style*="rgb(250,3,104)"] {
    color: var(--vu-accent-global) !important;
    fill: var(--vu-accent-global) !important;
    stroke: var(--vu-accent-global) !important;
}
.vunulu-home [style*="background-color: #FF0066"],
.vunulu-home [style*="background-color: #ff0066"],
.vunulu-home [style*="background-color: rgb(255, 0, 102)"],
.vunulu-home [style*="background:#FF0066"],
.vunulu-home [style*="background: #FF0066"],
.vunulu-home [style*="background-color: #FA0368"],
.vunulu-home [style*="background-color: #fa0368"] {
    background-color: var(--vu-accent-global) !important;
    background-image: none !important;
    color: var(--vu-bg-global) !important;
}

/* ----- Music-release carousel polish (Swiper) -------------------------- */
.vunulu-home .swiper,
.vunulu-home .elementor-image-carousel-wrapper {
    padding: 6px 0 28px;
}
.vunulu-home .swiper-slide,
.vunulu-home .swiper-slide img {
    border-radius: 12px;
    overflow: hidden;
}
.vunulu-home .swiper-slide {
    border: 1px solid var(--vu-line-global);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
}

/* Carousel arrows — rebuild as gold pills */
.vunulu-home .elementor-swiper-button,
.vunulu-home .swiper-button-prev,
.vunulu-home .swiper-button-next,
.vunulu-home .elementor-swiper-button-prev,
.vunulu-home .elementor-swiper-button-next {
    width: 44px !important;
    height: 44px !important;
    background: rgba(14, 13, 11, 0.7) !important;
    border: 1px solid var(--vu-accent-global) !important;
    border-radius: 50% !important;
    color: var(--vu-accent-global) !important;
    transition: all 0.2s;
}
.vunulu-home .elementor-swiper-button:hover,
.vunulu-home .swiper-button-prev:hover,
.vunulu-home .swiper-button-next:hover {
    background: var(--vu-accent-global) !important;
    color: var(--vu-bg-global) !important;
}
.vunulu-home .swiper-button-prev::after,
.vunulu-home .swiper-button-next::after {
    font-size: 16px !important;
    font-weight: 700;
}

/* Pagination bullets */
.vunulu-home .swiper-pagination-bullet {
    background: var(--vu-line-global) !important;
    opacity: 1;
}
.vunulu-home .swiper-pagination-bullet-active {
    background: var(--vu-accent-global) !important;
}

/* ==========================================================================
   FOOTER — site-wide brand pass on .rs-footer (parent theme's footer).
   Currently a white-background block with a dark crowd-photo overlay and
   pure-white H3s ("Address", "Contact", "Follow Us") plus a hot-pink
   "Shamz Media" credit at the bottom. Replace with full dark panel,
   gold headings, cream body, gold links, gold-on-dark social pills.
   Not scoped to .vunulu-home so the brand footer applies on every page.
   ========================================================================== */

.rs-footer,
.rs-footer.footer-style-1 {
    background-color: #0e0d0b !important;
    color: #f4ecd8;
    position: relative;
}
/* Dark gradient overlay sits above whatever background image the parent
   footer has, so the crowd photo becomes mood-lighting rather than the
   star of the show. */
.rs-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 13, 11, 0.78) 0%, rgba(14, 13, 11, 0.94) 100%);
    pointer-events: none;
    z-index: 0;
}
.rs-footer > *,
.rs-footer .container,
.rs-footer .footer-top,
.rs-footer .footer-bottom {
    position: relative;
    z-index: 1;
}

/* Headings: "Address", "Contact", "Follow Us" → gold */
.rs-footer h1,
.rs-footer h2,
.rs-footer h3,
.rs-footer h4,
.rs-footer h5,
.rs-footer .widget-title,
.rs-footer .footer-title {
    color: #c8a24a !important;
    letter-spacing: 0.05em;
    font-size: 15px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

/* Body text + list items → cream */
.rs-footer p,
.rs-footer li,
.rs-footer .widget li,
.rs-footer .widget p,
.rs-footer .footer-address,
.rs-footer .footer-contact li,
.rs-footer address {
    color: #f4ecd8 !important;
    font-size: 14px;
    line-height: 1.65;
}

/* Links — cream by default, gold on hover */
.rs-footer a {
    color: #f4ecd8;
    text-decoration: none;
    transition: color 0.2s;
}
.rs-footer a:hover,
.rs-footer a:focus-visible {
    color: #c8a24a;
}

/* Footer contact icons (envelope, phone, location pin) — repaint pink/parent
   colors to brand gold */
.rs-footer .icon-info i,
.rs-footer .icon-info svg,
.rs-footer .footer-contact i,
.rs-footer .footer-contact svg,
.rs-footer .contact-info i,
.rs-footer .contact-info svg,
.rs-footer .info-icon i,
.rs-footer .info-icon svg {
    color: #c8a24a !important;
    fill: #c8a24a !important;
    margin-right: 12px;
}

/* Social icons — circular gold-bordered pills, fill on hover */
.rs-footer .footer-social,
.rs-footer .social-icons,
.rs-footer .footer-share {
    display: flex;
    gap: 10px;
    margin-top: 4px;
    list-style: none;
    padding: 0;
}
.rs-footer .footer-social a,
.rs-footer .social-icons a,
.rs-footer .footer-share a {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(244, 236, 216, 0.22);
    color: #f4ecd8;
    transition: all 0.2s;
    background: transparent;
}
.rs-footer .footer-social a:hover,
.rs-footer .social-icons a:hover,
.rs-footer .footer-share a:hover {
    background: #c8a24a;
    border-color: #c8a24a;
    color: #0e0d0b;
    transform: translateY(-2px);
}

/* Footer logo column — give the wordmark room to breathe */
.rs-footer .footer-logo img,
.rs-footer .logo img {
    max-width: 140px;
    height: auto;
    margin-bottom: 14px;
}

/* Bottom bar / copyright */
.rs-footer .footer-bottom,
.rs-footer .copy-right,
.rs-footer .copyright,
.rs-footer .bottom-area {
    margin-top: 28px;
    padding: 22px 0 18px;
    border-top: 1px solid rgba(244, 236, 216, 0.14);
    color: #b9a677;
    font-size: 13px;
    letter-spacing: 0.02em;
    text-align: center;
}
.rs-footer .footer-bottom a,
.rs-footer .copy-right a,
.rs-footer .copyright a,
.rs-footer .bottom-area a {
    color: #c8a24a;
    font-weight: 600;
}

/* Defensive override for the "Shamz Media" credit — it ships with an
   inline pink color that this rule replaces. */
.rs-footer a[href*="shamzmedia"],
.rs-footer .copy-right a[style*="color"] {
    color: #c8a24a !important;
}

/* Newsletter / subscribe form (if the footer ever has one) */
.rs-footer .newsletter input[type="email"],
.rs-footer .newsletter input[type="text"],
.rs-footer form input[type="email"] {
    background: #15140f;
    border: 1px solid rgba(244, 236, 216, 0.18);
    color: #f4ecd8;
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 13px;
}
.rs-footer .newsletter button,
.rs-footer form button[type="submit"] {
    background: #c8a24a;
    color: #0e0d0b;
    border: 0;
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
}

/* --- Responsive trims ---------------------------------------------------- */
@media (max-width: 768px) {
    .vunulu-page .vu-hero h1 { font-size: 26px; }
    .vunulu-about .vu-section h2 { font-size: 22px; }
    .vunulu-page .vu-card .info .t { font-size: 16px; }

    /* Mobile menu items get a bit more breathing room */
    .vunulu-nav .responsive-menu li a {
        padding: 14px 18px !important;
        font-size: 15px !important;
    }
}

/* ==========================================================================
 * Vunulu — Events page detailed cards
 * Used by [vunulu_events_grid style="detailed"] on the Events page.
 * ========================================================================== */
.vunulu-page .vu-events-detailed {
    margin: 0 auto;
    max-width: 1180px;
}
.vunulu-page .vu-events-detailed-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 24px;
}
.vunulu-page .vu-event-card {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 28px;
    background: #15140f;
    border: 1px solid var(--vu-line, #2a2620);
    border-radius: var(--vu-radius, 14px);
    overflow: hidden;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.vunulu-page .vu-event-card:hover {
    border-color: var(--vu-accent, #c8a24a);
    box-shadow: 0 24px 60px -28px rgba(200, 162, 74, 0.35);
    transform: translateY(-2px);
}
.vunulu-page .vu-event-poster {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    background: #000;
    overflow: hidden;
    text-decoration: none;
}
.vunulu-page .vu-event-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.vunulu-page .vu-event-card:hover .vu-event-poster img {
    transform: scale(1.04);
}
.vunulu-page .vu-event-cat {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--vu-accent, #c8a24a);
    color: var(--vu-bg, #0e0d0b);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
    font-weight: 700;
}
.vunulu-page .vu-event-body {
    padding: 28px 28px 28px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.vunulu-page .vu-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 12px;
    color: var(--vu-accent, #c8a24a);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
}
.vunulu-page .vu-event-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.vunulu-page .vu-event-meta-item span[aria-hidden] {
    font-size: 14px;
    line-height: 1;
    text-transform: none;
}
.vunulu-page .vu-event-title {
    margin: 4px 0 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    line-height: 1.2;
    color: var(--vu-ink, #f4ecd8);
}
.vunulu-page .vu-event-title a {
    color: inherit;
    text-decoration: none;
}
.vunulu-page .vu-event-title a:hover {
    color: var(--vu-accent, #c8a24a);
}
.vunulu-page .vu-event-tagline {
    font-style: italic;
    color: var(--vu-muted, #b9a677);
    font-size: 15px;
    margin: 0;
}
.vunulu-page .vu-event-caption {
    color: var(--vu-ink, #f4ecd8);
    font-size: 15px;
    line-height: 1.65;
    margin: 6px 0 0;
}
.vunulu-page .vu-event-lineup {
    margin-top: 8px;
}
.vunulu-page .vu-event-lineup-label {
    display: block;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vu-accent, #c8a24a);
    margin-bottom: 8px;
    font-weight: 700;
}
.vunulu-page .vu-event-lineup ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.vunulu-page .vu-event-lineup li {
    background: rgba(200, 162, 74, 0.12);
    border: 1px solid rgba(200, 162, 74, 0.35);
    color: var(--vu-ink, #f4ecd8);
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.2;
}
.vunulu-page .vu-event-lineup li.more {
    background: transparent;
    border-style: dashed;
    color: var(--vu-muted, #b9a677);
}
.vunulu-page .vu-event-partners-count {
    color: var(--vu-muted, #b9a677);
    font-size: 13px;
    margin: 4px 0 0;
}
.vunulu-page .vu-event-partners-count strong {
    color: var(--vu-accent, #c8a24a);
}
.vunulu-page .vu-event-actions {
    margin-top: 10px;
}
.vunulu-page .vu-event-actions .vu-btn-primary {
    display: inline-block;
    background: var(--vu-accent, #c8a24a);
    color: var(--vu-bg, #0e0d0b);
    padding: 10px 22px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    transition: transform 0.2s, box-shadow 0.2s;
}
.vunulu-page .vu-event-actions .vu-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -10px rgba(200, 162, 74, 0.55);
}

/* Stack on tablet/mobile */
@media (max-width: 860px) {
    .vunulu-page .vu-event-card {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .vunulu-page .vu-event-poster {
        aspect-ratio: 16 / 10;
    }
    .vunulu-page .vu-event-body {
        padding: 24px 22px 28px;
    }
    .vunulu-page .vu-event-title {
        font-size: 24px;
    }
}

/* ==========================================================================
 * Vunulu — Photo gallery (single-event + CPT fallback)
 *
 * Bulletproof grid: targets a UNIQUE class (.vu-grid) — not the generic
 * .grid that could be hijacked by parent-theme Bootstrap/Foundation
 * resets — and uses high specificity + !important on the layout props
 * so caching plugins / Elementor / future parent CSS can't break it.
 *
 * Behaviour: 4-column grid on desktop, square thumbs that crop via
 * object-fit, fixed-height fallback if the browser ignores aspect-ratio,
 * stacks to 2 columns on tablets and 2 columns on mobile.
 * ========================================================================== */
body.vunulu-page .vu-gallery .vu-grid,
body .vunulu-page .vu-gallery .vu-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    list-style: none !important;
}
body.vunulu-page .vu-gallery .vu-grid > * {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
body.vunulu-page .vu-gallery .vu-grid .cell {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1;
    /* Fallback for browsers/caches that ignore aspect-ratio */
    height: auto;
    min-height: 220px;
    overflow: hidden !important;
    border-radius: 6px !important;
    background: #000 !important;
    border: 1px solid var(--vu-line, rgba(244, 236, 216, 0.12)) !important;
    text-decoration: none !important;
    flex: none !important;
}
@supports (aspect-ratio: 1 / 1) {
    body.vunulu-page .vu-gallery .vu-grid .cell {
        min-height: 0;
    }
}
body.vunulu-page .vu-gallery .vu-grid .cell img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    transition: transform 0.4s ease;
}
body.vunulu-page .vu-gallery .vu-grid .cell:hover img {
    transform: scale(1.06);
}

@media (max-width: 900px) {
    body.vunulu-page .vu-gallery .vu-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    body.vunulu-page .vu-gallery .vu-grid .cell {
        min-height: 180px;
    }
}
@media (max-width: 480px) {
    body.vunulu-page .vu-gallery .vu-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }
    body.vunulu-page .vu-gallery .vu-grid .cell {
        min-height: 140px;
    }
}

/* ==========================================================================
 * Event gallery — Magnific Popup lightbox polish
 *
 * The lightbox itself is initialised from single-event.php; this block just
 * adds a small "click any photo" hint and ensures every clickable surface
 * carries the right cursor. Magnific Popup's own CSS (.mfp-*) is loaded by
 * the parent theme — we only override the counter / arrows / caption.
 * ========================================================================== */
.vunulu-event .vu-gallery-hint {
    color: var(--vu-muted);
    font-size: 13px;
    margin: 0 0 18px;
}

.vunulu-page .vu-lightbox,
.vunulu-page .vu-lightbox img,
.vunulu-page .vu-event-poster .vu-lightbox--poster {
    cursor: zoom-in;
}

/* Magnific Popup overrides — keep on-brand */
.vu-mfp.mfp-bg {
    background: #060606;
    opacity: 0;
    transition: opacity 200ms ease-out;
}
.vu-mfp.mfp-bg.mfp-ready { opacity: 0.92; }

.vu-mfp .mfp-counter {
    color: var(--vu-accent, #d4a017);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    top: 16px;
    right: 16px;
}
.vu-mfp .mfp-bottom-bar { margin-top: -36px; }
.vu-mfp .mfp-title {
    color: #f3f3f3;
    font-size: 14px;
    line-height: 1.4;
    padding-right: 60px;
    text-align: center;
}
.vu-mfp .vu-mfp-title { font-style: italic; }
.vu-mfp img.mfp-img {
    padding: 28px 0;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.vu-mfp .mfp-arrow-left:after  { border-right-color: var(--vu-accent, #d4a017); }
.vu-mfp .mfp-arrow-right:after { border-left-color:  var(--vu-accent, #d4a017); }
.vu-mfp .mfp-close { color: #fff; opacity: 0.85; }
.vu-mfp .mfp-close:hover { opacity: 1; }

@media (max-width: 640px) {
    .vu-mfp .mfp-arrow   { transform: scale(0.7); }
    .vu-mfp .mfp-counter { font-size: 11px; right: 12px; top: 12px; }
}

/* =====================================================================
   Homepage — Community Wall, Press Strip, Newsletter (added 2026-05-19)
   Scoped under body.vunulu-home so nothing leaks to the Tourism Awards
   site. Token supplements live in the wrapper so we don't depend on
   --vu-cream-soft / --vu-accent-h being defined globally yet.
   ===================================================================== */
body.vunulu-home {
    --vu-cream-soft: #e8dfc9;
    --vu-accent-h:   #d8b25a;
    --vu-line-bright: rgba(244, 236, 216, 0.28);
    --vu-success:    #2a8a4a;
    --vu-error:      #c2454e;
}

/* ---- Community Wall ----------------------------------------------- */
body.vunulu-home .vu-community-wall { padding: 96px 0 64px; }
body.vunulu-home .vu-community-wall .vu-eyebrow {
    color: var(--vu-accent);
    letter-spacing: 0.20em;
}
body.vunulu-home .vu-community-carousel .elementor-image-carousel-wrapper {
    margin-top: 8px;
}
body.vunulu-home .vu-community-carousel .swiper-slide img {
    border-radius: var(--vu-radius, 10px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    aspect-ratio: 4 / 5;
    object-fit: cover;
    width: 100%;
}

/* ---- Press Strip --------------------------------------------------- */
body.vunulu-home .vu-press-strip {
    background: var(--vu-bg);
    border-top: 1px solid var(--vu-line);
    border-bottom: 1px solid var(--vu-line);
    padding: 56px 0;
}
body.vunulu-home .vu-press-strip .vu-eyebrow {
    color: var(--vu-accent);
    letter-spacing: 0.22em;
}
body.vunulu-home .vu-press-logos .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
}
body.vunulu-home .vu-press-logos img {
    max-height: 44px;
    width: auto;
    opacity: 0.85;
    filter: brightness(0) saturate(100%) invert(94%) sepia(8%) saturate(700%) hue-rotate(5deg) brightness(100%);
    transition: filter 220ms ease, opacity 220ms ease;
}
body.vunulu-home .vu-press-logos img:hover {
    filter: none;
    opacity: 1;
}

/* ---- Newsletter ---------------------------------------------------- */
body.vunulu-home .vu-newsletter {
    background: var(--vu-panel);
    padding: 96px 0;
}
body.vunulu-home .vu-newsletter .vu-eyebrow {
    color: var(--vu-accent);
    letter-spacing: 0.22em;
}
body.vunulu-home .vu-newsletter .vu-newsletter-form {
    display: flex;
    gap: 12px;
    max-width: 520px;
    margin: 0 auto;
    align-items: stretch;
}
body.vunulu-home .vu-newsletter input[type="email"] {
    background: var(--vu-bg);
    border: 1px solid var(--vu-line);
    color: var(--vu-ink);
    padding: 14px 18px;
    border-radius: var(--vu-radius, 10px);
    flex: 1 1 auto;
    font-size: 15px;
    transition: border-color 200ms ease;
}
body.vunulu-home .vu-newsletter input[type="email"]::placeholder {
    color: var(--vu-muted);
}
body.vunulu-home .vu-newsletter input[type="email"]:focus {
    border-color: var(--vu-accent);
    outline: none;
}
body.vunulu-home .vu-newsletter button {
    background: var(--vu-accent);
    color: var(--vu-bg);
    letter-spacing: 0.12em;
    padding: 14px 28px;
    border: 0;
    border-radius: var(--vu-radius, 10px);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color 200ms ease;
}
body.vunulu-home .vu-newsletter button:hover { background: var(--vu-accent-h); }
body.vunulu-home .vu-newsletter .vu-fineprint p {
    color: var(--vu-muted);
    font-size: 13px;
    font-style: italic;
}
body.vunulu-home .vu-newsletter .vu-newsletter-msg {
    text-align: center;
    margin: 16px auto 0;
    max-width: 520px;
    font-size: 14px;
}
body.vunulu-home .vu-newsletter .vu-newsletter-msg.is-ok    { color: var(--vu-success); }
body.vunulu-home .vu-newsletter .vu-newsletter-msg.is-error { color: var(--vu-error); }

@media (max-width: 640px) {
    body.vunulu-home .vu-community-wall { padding: 64px 0 40px; }
    body.vunulu-home .vu-newsletter { padding: 64px 0; }
    body.vunulu-home .vu-newsletter-form { flex-direction: column; }
}

/* =====================================================================
   Sponsor strips — make the per-event labels readable on the dark band
   (added 2026-05-20). Both the "Sponsor strips" h4 heading and each
   .strip .cap event label had no CSS, so they were rendering in the
   browser default colour against --vu-bg and effectively disappearing.
   ===================================================================== */
.vunulu-page .vu-sponsors .strips {
    margin-top: 32px;
}
.vunulu-page .vu-sponsors .strips > h4 {
    margin: 0 0 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vu-accent);
    text-align: center;
}
.vunulu-page .vu-sponsors .strip {
    margin: 0 auto 22px;
    max-width: 1200px;
    text-align: center;
}
.vunulu-page .vu-sponsors .strip img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--vu-radius, 10px);
    border: 1px solid var(--vu-line);
}
.vunulu-page .vu-sponsors .strip .cap {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--vu-ink);
    text-align: center;
    opacity: 0.92;
}

/* =====================================================================
   Homepage — Culture Reel (added 2026-05-20)
   Portrait-tilted slides between the CTA and the Community Wall.
   Heritage / regalia / close-up imagery; slower autoplay, cinematic.
   ===================================================================== */
body.vunulu-home .vu-culture-reel {
    background: var(--vu-bg);
}
body.vunulu-home .vu-culture-reel .vu-eyebrow {
    color: var(--vu-accent);
    letter-spacing: 0.22em;
}
body.vunulu-home .vu-culture-carousel {
    margin-top: 8px;
}
body.vunulu-home .vu-culture-carousel .swiper-slide img,
body.vunulu-home .vu-culture-carousel .elementor-image-carousel img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.5);
    transition: transform 600ms ease, box-shadow 600ms ease;
}
body.vunulu-home .vu-culture-carousel .swiper-slide-active img {
    box-shadow: 0 22px 58px rgba(0, 0, 0, 0.65);
}
body.vunulu-home .vu-culture-carousel .elementor-swiper-button {
    color: var(--vu-accent);
    background: rgba(14, 13, 11, 0.7);
    border: 1px solid rgba(200, 162, 74, 0.35);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    backdrop-filter: blur(6px);
}
body.vunulu-home .vu-culture-carousel .elementor-swiper-button:hover {
    background: var(--vu-accent);
    color: var(--vu-bg);
}
body.vunulu-home .vu-culture-carousel .swiper-pagination-bullet-active {
    background: var(--vu-accent);
}

/* ---- Community Wall — tighten + match the Culture Reel polish ---- */
body.vunulu-home .vu-community-wall {
    background: var(--vu-panel);
}
body.vunulu-home .vu-community-carousel .swiper-slide img,
body.vunulu-home .vu-community-carousel .elementor-image-carousel img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
body.vunulu-home .vu-community-carousel .elementor-swiper-button {
    color: var(--vu-accent);
    background: rgba(14, 13, 11, 0.7);
    border: 1px solid rgba(200, 162, 74, 0.30);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    backdrop-filter: blur(6px);
}
body.vunulu-home .vu-community-carousel .elementor-swiper-button:hover {
    background: var(--vu-accent);
    color: var(--vu-bg);
}
body.vunulu-home .vu-community-carousel .swiper-pagination-bullet-active {
    background: var(--vu-accent);
}

@media (max-width: 640px) {
    body.vunulu-home .vu-culture-reel { padding: 72px 0 56px; }
    body.vunulu-home .vu-culture-carousel .swiper-slide img,
    body.vunulu-home .vu-culture-carousel .elementor-image-carousel img {
        aspect-ratio: 4 / 5;
    }
}