/* ═══════════════════════════════════════════════════════════════════
   dm-theme-african.css — African-inspired theme layer for DucorMall
   Covers: typography · textures · Adinkra motifs · savannah imagery
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. DISPLAY FONT ────────────────────────────────────────────── */
/* Outfit — loaded via Google Fonts in layouts (--dm-font-display) */

/* ── 2. DESIGN TOKENS ───────────────────────────────────────────── */
:root {
    --af-gold: #d97706;
    --af-green: #15803d;
    --af-earth: #7c2d12;
    --af-ochre: #b45309;

    /* Ankara diagonal weave (very light overlay) */
    --af-ankara:
        repeating-linear-gradient(
            45deg,
            rgba(41, 44, 122, 0.035) 0px,
            rgba(41, 44, 122, 0.035) 1px,
            transparent 1px,
            transparent 20px
        ),
        repeating-linear-gradient(
            -45deg,
            rgba(41, 44, 122, 0.025) 0px,
            rgba(41, 44, 122, 0.025) 1px,
            transparent 1px,
            transparent 20px
        );
}

/* ── 3. TYPOGRAPHY ──────────────────────────────────────────────── */
/* Outfit on every display heading */
h1,
h2,
h3,
.dm-section-head__title,
.dm-topbar__title,
.dm-account-sidebar__name,
.home-hero-slide--image h1,
.banner-hero h1,
.banner-hero h2,
.banner-hero h3,
.dm-auth-benefits__headline {
    font-family: var(--dm-font-display);
    letter-spacing: var(--dm-display-letter-spacing-wide);
    text-transform: uppercase;
}

/* ── 6. SECTION HEADING — Adinkra diamond badge ─────────────────── */
.dm-section-head__badge {
    letter-spacing: 0.16em;
    font-size: 0.62rem;
}
.dm-section-head__badge::before {
    content: "◆";
    font-size: 0.55rem;
    color: var(--af-gold);
    background: none !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
}

/* ── 7. FEATURE CARD icon tints ─────────────────────────────────── */
.dm-feature-card__icon--live {
    background: rgba(217, 119, 6, 0.12) !important;
    color: var(--af-gold) !important;
}
.dm-feature-card__icon--trust {
    background: rgba(21, 128, 61, 0.1) !important;
    color: var(--af-green) !important;
}

/* ── 8. PRODUCT CARD — gold hover accent ────────────────────────── */
.product-item-grid:hover {
    border-top: 3px solid var(--af-gold) !important;
}
.product-item-list:hover {
    border-left: 3px solid var(--af-gold) !important;
}

/* ── 9. BUTTONS — subtle diagonal texture overlay ───────────────── */
.dm-btn--primary,
.dm-btn--secondary,
.btn.btn-brand-2,
.btn.btn-brand-3 {
    position: relative;
    overflow: hidden;
}
.dm-btn--primary::after,
.dm-btn--secondary::after,
.btn.btn-brand-2::after,
.btn.btn-brand-3::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        45deg,
        transparent 0px,
        transparent 6px,
        rgba(255, 255, 255, 0.07) 6px,
        rgba(255, 255, 255, 0.07) 7px
    );
}

/* ── 10. ACTIVE SIDEBAR LINK — earthy gold accent ───────────────── */
.dm-drawer-nav__link.is-active,
.dm-drawer-nav__link.active {
    border-left: 3px solid var(--af-gold);
    padding-left: calc(0.65rem - 3px);
    background: rgba(217, 119, 6, 0.08) !important;
    color: var(--af-earth) !important;
}

/* ── 11. ADINKRA DOT-GRID watermark on page background ──────────── */
body:not(.dm-account-body) {
    background-image: radial-gradient(
        circle,
        rgba(41, 44, 122, 0.05) 1px,
        transparent 1px
    );
    background-size: 32px 32px;
}

/* ── 12. AFRICAN IMAGERY ────────────────────────────────────────── */

/* Auth left panel — photo set per page via --dm-auth-panel-image on .dm-auth-benefits */
.dm-auth-benefits > * {
    position: relative;
    z-index: 1;
}

/* ── 13. RESPONSIVE ─────────────────────────────────────────────── */

/* ── 14. PHOTOGRAPHIC BACKGROUNDS — docs images as wallpapers ─────── */

/* Spotlights row — African vibe */
.dm-home .dm-home-spotlights {
    position: relative;
    overflow: hidden;
}
.dm-home .dm-home-spotlights::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("/images/african/african-vibe.jpg");
    background-size: cover;
    background-position: center 35%;
    opacity: 0.07;
}
.dm-home .dm-home-spotlights > .container {
    position: relative;
    z-index: 1;
}

/* Ducor Live banner — African vibe replaces the blue gradient */
.dm-live-banner {
    background:
        linear-gradient(
            135deg,
            rgba(0, 0, 0, 0.62) 0%,
            rgba(20, 10, 5, 0.5) 50%,
            rgba(0, 0, 0, 0.68) 100%
        ),
        url("/images/african/african-vibe.jpg") center 40% / cover no-repeat !important;
}

/* Kente pattern texture on top of the live banner */
.dm-live-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("/images/african/pattern.jpeg");
    background-size: 320px auto;
    background-repeat: repeat;
    opacity: 0.05;
    mix-blend-mode: overlay;
}

/* Best Sellers / Trending / surface sections — kente pattern texture */
.dm-home .dm-section--surface {
    position: relative;
    overflow: hidden;
}
.dm-home .dm-section--surface::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("/images/african/pattern.jpeg");
    background-size: 420px auto;
    background-position: center;
    background-repeat: repeat;
    opacity: 0.05;
}
.dm-home .dm-section--surface > .container {
    position: relative;
    z-index: 1;
}

.dm-home .home-mosaic {
    position: relative;
    overflow: hidden;
    background-color: white;
}

/* Trust / Promise section — drums */
.dm-home .section-box.mt-90 {
    position: relative;
    overflow: hidden;
}
.dm-home .section-box.mt-90::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("/images/african/drums.jpg");
    background-size: cover;
    background-position: center;
    opacity: 0.07;
}
.dm-home .section-box.mt-90 > .container {
    position: relative;
    z-index: 1;
}

/* Newsletter — photo via --dm-newsletter-image on the component */
.dm-newsletter.box-newsletter {
    background:
        linear-gradient(
            135deg,
            rgba(0, 0, 0, 0.62) 0%,
            rgba(41, 44, 122, 0.45) 50%,
            rgba(0, 0, 0, 0.68) 100%
        ),
        var(--dm-newsletter-image) var(--dm-newsletter-position, center 40%) / cover no-repeat !important;
    position: relative;
    overflow: hidden;
}

.dm-newsletter.box-newsletter::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("/images/african/pattern-2.jpeg");
    background-size: 340px auto;
    background-position: center;
    background-repeat: repeat;
    opacity: 0.06;
    mix-blend-mode: overlay;
}

.dm-shop-newsletter.box-newsletter::after {
    background-image: url("/images/african/pattern.jpeg");
    opacity: 0.05;
}

.dm-newsletter.box-newsletter > .container {
    position: relative;
    z-index: 1;
}

/* ── AUTH PAGES ──────────────────────────────────────────────────── */
/* Form side stays plain; left panel photo is in dm-auth.css */

/* Form panel — kente pattern texture at low opacity */
.dm-auth-form-panel {
    position: relative;
    overflow: hidden;
}

.dm-auth-form-panel > * {
    position: relative;
    z-index: 1;
}

/* Shop page newsletter — African savannah photo */
.dm-shop-newsletter {
    background:
        linear-gradient(
            135deg,
            rgba(0, 0, 0, 0.6) 0%,
            rgba(15, 25, 10, 0.5) 50%,
            rgba(0, 0, 0, 0.65) 100%
        ),
        url("/images/african/african-savanah.jpg") center 50% / cover no-repeat !important;
    position: relative;
    overflow: hidden;
}
.dm-shop-newsletter::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("/images/african/pattern.jpeg");
    background-size: 340px auto;
    background-repeat: repeat;
    opacity: 0.05;
    mix-blend-mode: overlay;
}
.dm-shop-newsletter > .container {
    position: relative;
    z-index: 1;
}

/* ── PRICING FEATURE CARDS ───────────────────────────────────────── */

.dm-pricing-feature {
    position: relative;
    overflow: hidden;
    border-radius: var(--dm-radius, 8px);
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem 1.75rem;
    color: #fff;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}

/* Bottom-to-top dark gradient so text is always readable */
.dm-pricing-feature::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.08) 0%,
        rgba(0, 0, 0, 0.55) 50%,
        rgba(0, 0, 0, 0.82) 100%
    );
}

.dm-pricing-feature > * {
    position: relative;
    z-index: 2;
}

.dm-pricing-feature__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
    color: #fff;
    line-height: 1.2;
}

.dm-pricing-feature__text {
    font-size: 0.875rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 1.25rem;
}

.dm-pricing-feature__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/* Per-card background images */
.dm-pricing-feature--promotion {
    background-image: url("/images/african/african-women-2.jpg");
    background-size: cover;
    background-position: center 45%;
}

.dm-pricing-feature--live {
    background-image: url("/images/african/african-vibe.jpg");
    background-size: cover;
    background-position: center 40%;
}

.dm-pricing-feature--video {
    background-image: url("/images/african/african-women.jpg");
    background-size: cover;
    background-position: center 30%;
}

/* ── 15. RESPONSIVE – scale down patterns on mobile ──────────────── */
@media (max-width: 767.98px) {
    .dm-home .dm-section--surface::before {
        background-size: 280px auto;
    }
    .dm-newsletter.box-newsletter::after {
        background-size: 240px auto;
    }
}

/* ── 16. ABOUT PAGE ──────────────────────────────────────────────── */
/* Photo backgrounds live in dm-about.css — gold accents here */

.dm-about .dm-about-nav {
    background: #fff;
    background-image: none;
    border-color: var(--dm-border);
}

.dm-about .dm-about-nav a:hover {
    color: var(--af-gold);
    background: rgba(217, 119, 6, 0.08);
}

.dm-about .dm-about-step {
    border-top: 3px solid var(--af-gold);
    background: #fff;
    background-image: none;
}

.dm-about .dm-about-section__eyebrow {
    color: var(--af-gold);
}

.dm-about .dm-about-contact {
    border: 1px solid var(--dm-border);
}

/* ── 16a. RESPONSIVE — about page ───────────────────────────────── */
@media (max-width: 767.98px) {
    .dm-about .dm-about-section {
        padding: 1.5rem 1.25rem 2rem;
    }
}