/* ============================================================
   HOME POLISH — assetsv2/css/home-polish.css
   Readability and touch size only. No colours, layouts or
   content change. Loaded from viewsv2/home.php.
   ============================================================ */

/* footer links: same look, bigger touch area (44px comfortable) */
footer ul a,
footer .footer-link {
    display: inline-block;
    padding-block: 10px;
    margin-block: -10px;
}
footer ul.space-y-3 > li + li { margin-top: .5rem; }

/* footer bottom line + small headings: readable on phones */
footer h4.text-\[10px\] { font-size: 11px; }
footer .py-6.text-\[10px\] { font-size: 11px; }

/* icon-only round buttons (slider arrows, close): at least 44px target */
#categories-nav-controls button,
#insights-scroll-track ~ button { min-width: 44px; min-height: 44px; }

/* the text on category cards sits on photos: stronger shadow keeps it readable */
#categories-hybrid-section .category-slider-card span,
#categories-hybrid-section .category-slider-card h3 { text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }

/* ---------- shimmer while photos load ----------
   Every photo (images that fill their frame) carries a soft moving
   highlight behind it. Once the picture arrives it paints over the
   shimmer, so nothing needs to be switched off. Logos and the phone
   screens are not affected. */
@keyframes hp-shimmer { from { background-position: 160% 0; } to { background-position: -60% 0; } }
img.object-cover,
img.object-contain.hp-photo {
    background-color: #111;
    background-image: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .09) 48%, rgba(255, 255, 255, .15) 52%, transparent 70%);
    background-size: 220% 100%;
    background-repeat: no-repeat;
    animation: hp-shimmer 1.6s linear 5;   /* about 8 s, then it rests: keeps phones cool */
}
/* not yet loaded: hide the broken-image icon / alt text so only the shimmer shows */
img.object-cover:not([src]) { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
    img.object-cover, img.object-contain.hp-photo { animation: none; background-image: none; }
}

/* ---------- chatbot robot (Rive Bot) ----------
   The artwork has a light panel behind the robot. The mask melts the panel into the
   black section so it reads as a soft spotlight instead of a pasted box. Added by
   main.js only when the animation has the head-follow controls. */
#app-bot-canvas.bot-spot {
    -webkit-mask-image: radial-gradient(ellipse 58% 54% at 50% 52%, #000 34%, transparent 74%);
            mask-image: radial-gradient(ellipse 58% 54% at 50% 52%, #000 34%, transparent 74%);
}