:root{
 --bg:#f9fafb;
 --text:#111827;
 --accent:#2563eb;
 --muted:#6b7280;
}
.dark{
 --bg:#0f172a;
 --text:#e2e8f0;
 --muted:#94a3b8;
}
body{background:var(--bg);color:var(--text);}
a.nav-link{color:var(--text)!important;}
a.nav-link:hover{color:var(--accent)!important;}
.btn-primary{background:var(--accent);border:none;}
.section-title{font-size:2rem;font-weight:700;}

/* GLOBAL PAGE WATERMARK */
html {
    background: var(--bg);
}

body {
    position: relative;
    background: none !important;  /* ensures watermark isn't hidden */
}

/* GLOBAL WATERMARK */
body::after {
    content:"";
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    background:url('/assets/images/shoppers.webp') center/contain no-repeat;
    opacity:0.10;
    pointer-events:none;
    z-index:-1; /* ensures it never pushes layout */
    will-change:transform; /* prevents reflow */    

    /* Desktop Default */
    width:50vw;
    height:50vw;
}

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

/* Large Screens */
@media (min-width:1400px) {
    body::after {
        width:50vw;
        height:50vw;
    }
}

/* Tablets */
@media (max-width:1024px) {
    body::after {
        width:55vw;
        height:55vw;
    }
}

/* Large Phones */
@media (max-width:768px) {
    body::after {
        width:70vw;
        height:70vw;
        opacity:0.08; /* a little softer */
    }
}

/* Small Phones / Narrow Devices */
@media (max-width:480px) {
    body::after {
        width:90vw;
        height:90vw;
        opacity:0.06; /* prevent overpowering */
    }
}

nav.navbar {
    min-height:70px; /* match current nav height */
}

.hero {
    min-height:60vh;       /* or exact pixel height */
    display:flex;
    align-items:center;
}

/* Force bootstrap-icons to not block rendering */
@font-face {
    font-family: "bootstrap-icons";
    src: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff2") format("woff2"),
         url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff") format("woff");
    font-display: swap; /* <-- solves Lighthouse warning */
    font-style: normal;
    font-weight: 400;
}


/* Ensure ALL page content sits above watermark */
* {
    position:relative;
    z-index:1;
}