/* ========================================================================
   Yellowedge Media — Light theme override
   Load AFTER css/style.css:
   <link rel="stylesheet" href="css/style.css">
   <link rel="stylesheet" href="css/theme-yellow.css">
   ======================================================================== */

/* ---------- 1. Palette: white background, black text, yellow accent ---------- */

:root,
body.lightmode,
body.lightmode .keep-dark,
.keep-dark {
    --primary: #111111;
    /* main text / headings */
    --secondary: #FFFFFF;
    /* page + card base background */
    --text-color: #4A4A4A;
    --text-color-2: #111111;

    --accent-color: #ffde59;
    /* yellow */
    --accent-color-2: #111111;
    /* text that sits on accent */
    --accent-color-3: #E6E6E6;
    /* borders / soft panels */
    --accent-color-4: #FAFAFA;
    /* card background */
    --accent-color-5: #FFFFFF7D;
    --accent-color-6: #F2B70566;
    --accent-color-7: #FFFFFF8C;

    --star-color: #ffde59;
    --error-color: #E63946;
    --accent-transparent: #00000000;
    --accent-transparent-2: #00000073;

    --box-shadow-top-left: -3px -3px 7px 0px rgba(242, 183, 5, 0.45);
    --box-shadow-bottom-right: 3px 3px 7px 0px rgba(242, 183, 5, 0.45);
    --box-shadow-top-left-wide: -3px -3px 10px 0px rgba(242, 183, 5, 0.45);
    --box-shadow-bottom-right-wide: 3px 3px 10px 0px rgba(242, 183, 5, 0.45);
}

body {
    background-color: #FFFFFF;
    color: var(--primary);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--primary);
}

/* ---------- 2. Headings: solid black instead of fading gradient ---------- */

.title-heading {
    background-image: none;
    -webkit-text-fill-color: var(--primary);
    color: var(--primary);
}

.title-heading-banner {
    background-image: none;
    -webkit-text-fill-color: var(--secondary);
    color: var(--secondary);
}
/* ---------- 3. Glow / hover shadows recoloured to yellow ---------- */

.site-logo:hover,
.digital-process-steps-wrapper:hover,
.card-service:hover,
.card-chooseus:hover {
    box-shadow: -3px -3px 7px 8px rgba(242, 183, 5, 0.45);
}

/* ---------- 4. Elements that used --secondary as a text colour ---------- */

.service-list a,
.service-list li::before,
.detail-list,
.card-about .counter-detail,
.card-expertise .counter-detail {
    color: var(--primary);
}

/* ---------- 5. Buttons / nav ---------- */

.btn-accent {
    background-color: var(--accent-color);
    border: 1px solid var(--accent-color);
}

.btn-title a,
.btn-title span {
    color: #111111;
}

.btn:hover .btn-title a,
.btn:hover .btn-title span,
.btn:focus .btn-title a,
.btn:focus .btn-title span {
    color: #111111 !important;
}

.btn-accent:hover {
    background-color: #FFD447;
}

.nav-btn,
.close-btn {
    color: #111111;
}

.navbar,
.dropdown-menu {
    background-color: #FFFFFF;
    border-color: var(--accent-color-3);
}

/* ---------- 6. Accordion +/- icons in black ---------- */

.accordion-button::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23111111" class="bi bi-plus" viewBox="0 0 16 16"><path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/></svg>');
}

.accordion-button:not(.collapsed)::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23111111" class="bi bi-dash" viewBox="0 0 16 16"><path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8"/></svg>');
}

/* ---------- 7. Panels that were near-black ---------- */

.card-case-studies,
.card-testimonial-header-title,
.digital-process-steps,
.partnership-wrapper,
.team-layout,
.icon-wrapper,
.service-icon-wrapper,
.pricing-highlights,
.testimonial-header-link-wrapper,
#newsletterForm,
#newsletterForm input {
    background-color: #FFFFFF;
}

.digital-process-banner,
.card-partner,
.newsletter-layout {
    background-image: radial-gradient(at top left, var(--accent-color-4) 0%, var(--accent-color-4) 50%);
    border: 1px solid var(--accent-color-3);
}

.banner-video-container,
.guide-banner::before,
.cta-service-banner::before {
    background-image: linear-gradient(180deg, var(--accent-color-7) 0%, var(--accent-color-3) 100%);
}

.form input,
.form textarea,
.form select {
    background-color: #FFFFFF;
    border: 1px solid var(--accent-color-3);
    color: var(--primary);
}