/* ═══════════════════════════════════════════════════════════════════════════
   IRISH PRIDE LAYER · homepage accents
   Every selector lives under the .ie- namespace and every element can be
   removed independently. Nothing overrides existing rules and nothing
   changes existing layout.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --ie-green: #169B62;
    --ie-green-bright: #1DB374;
    --ie-green-deep: #0B4D3B;
    --ie-orange: #FF883E;
}

/* 1. Global cohesion: selection + scrollbar tinted Irish green */
::selection { background: rgba(22, 155, 98, 0.24); }

html { scrollbar-color: #169B62 #eef2ee; scrollbar-width: thin; }
body::-webkit-scrollbar { width: 12px; }
body::-webkit-scrollbar-track { background: #eef2ee; }
body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1DB374, #0B4D3B);
    border-radius: 99px;
    border: 3px solid #eef2ee;
}

/* 2. Tricolour signature line on the bottom edge of the stats band */
#statsCounter:has(> .ie-stats-bottomline) { position: relative; overflow: hidden; }
.ie-stats-bottomline {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(90deg,
        #0E7A4D 0%,
        #169B62 8%,
        #1DB374 30%,
        #F6F3EC 34%,
        #FFFFFF 50%,
        #F6F3EC 66%,
        #FF9D5C 70%,
        #FF883E 92%,
        #E86F24 100%);
    box-shadow: 0 -1px 12px rgba(22, 155, 98, 0.35),
                0 -1px 4px rgba(2, 6, 23, 0.25);
}
.ie-stats-bottomline::after {
    content: "";
    position: absolute;
    inset: 0 0 50% 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
}

/* 3. Product card: tricolour top edge (in flow, clipped by the card radius) */
.ie-card-top {
    position: relative;
    display: block;
    width: 100%;
    height: 5px;
    overflow: hidden;
    background: linear-gradient(90deg,
        #0E7A4D 0%,
        #169B62 8%,
        #1DB374 30%,
        #F6F3EC 34%,
        #FFFFFF 50%,
        #F6F3EC 66%,
        #FF9D5C 70%,
        #FF883E 92%,
        #E86F24 100%);
    box-shadow: 0 1px 6px rgba(22, 155, 98, 0.22);
}
.ie-card-top::after {
    content: "";
    position: absolute;
    inset: 0 0 50% 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
}

/* 4. Shamrock watermarks and card shamrocks */
.certPremiumSection:has(.ie-wm--knot) { position: relative; }
.mhDefSection:has(.ie-wm--shamrock) { position: relative; }
.certStepsCard:has(.ie-card-clover) { position: relative; }

.ie-wm {
    position: absolute;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.ie-wm--knot {
    left: 30px;
    bottom: 30px;
    width: 190px;
    height: 190px;
    color: #ffffff;
    opacity: 0.08;
}
.ie-wm--shamrock {
    right: 3.5%;
    top: 42px;
    width: 170px;
    height: 170px;
    color: #169B62;
    opacity: 0.07;
    animation: ieSway 18s ease-in-out infinite alternate;
    transform-origin: 50% 50%;
}
@keyframes ieSway {
    from { transform: rotate(-4deg); }
    to   { transform: rotate(4deg); }
}
.ie-card-clover {
    position: absolute;
    right: 12px;
    bottom: 10px;
    width: 62px;
    height: 62px;
    color: #169B62;
    opacity: 0.08;
    pointer-events: none;
    user-select: none;
}
@media (max-width: 1024px) {
    .ie-wm--knot, .ie-wm--shamrock { display: none; }
}

/* 5. Reduced motion: everything ambient stops, nothing breaks */
@media (prefers-reduced-motion: reduce) {
    .ie-wm--shamrock { animation: none; transform: none; }
}