/**
 * Copyright © 2026 Hypernova Oy. All rights reserved.
 *
 * Frontend tuning for Hypernova/porto_child: interface polish plus render/paint savings.
 *
 * Kept as a plain stylesheet on purpose - the parent chain's web/css/source/_extend.less hook is
 * commented out in Magento/blank, so a child theme .less file would never be compiled in.
 * It is declared last (see Magento_Theme/layout/default_head_blocks.xml) so it can adjust the
 * theme rules without !important.
 *
 * Only transform/opacity/colour properties are animated: they are composited, so hovering does not
 * force a repaint of large boxes the way animated box-shadows/filters do.
 */

/* ---------------------------------------------------------------------------
 * Interactions: the theme ships 0.3s-0.5s transitions, which read as "slow" on
 * hover. Shortening the duration (and keeping the theme's properties) makes the
 * interface feel immediate without changing how anything looks.
 * ------------------------------------------------------------------------- */
a,
button,
.action,
.action.primary,
.btn,
input[type="submit"],
input[type="button"],
.product-item,
.product-item-photo,
.product-image-photo,
.sidebar .block,
.nav-sections,
.filter-options-item,
.cart.item,
.table-wrapper tr {
    transition-duration: 0.18s;
}

/* Keyboard and pointer feedback that is instant and cheap to draw */
button:active,
.action:active,
.btn:active,
input[type="submit"]:active {
    transform: translateY(1px);
}

:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

html {
    -webkit-tap-highlight-color: transparent;
}

/* ---------------------------------------------------------------------------
 * Rendering savings below the fold.
 * content-visibility lets the browser skip layout and paint for offscreen blocks;
 * contain-intrinsic-size keeps the scrollbar and scroll position stable.
 * ------------------------------------------------------------------------- */
.products-grid .product-item,
.page-footer,
.page-footer .footer.content {
    content-visibility: auto;
    contain-intrinsic-size: auto 320px;
}

.page-footer,
.page-footer .footer.content {
    contain-intrinsic-size: auto 480px;
}

/* ---------------------------------------------------------------------------
 * Small design touches
 * ------------------------------------------------------------------------- */
h1,
h2,
h3,
.page-title {
    text-wrap: balance;
}

.price,
.price-wrapper .price,
.product-item .price-box .price {
    font-variant-numeric: tabular-nums;
}

.product-item-link:hover,
.cms-content a:hover,
.column.main a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.table-wrapper tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Product page: keep the main image eager (it is the largest contentful paint) even though
 * grid images are lazy-loaded by the module plugin. */
.product.media .gallery-placeholder img {
    content-visibility: visible;
}

/* ---------------------------------------------------------------------------
 * Mobile: 16px input text stops iOS Safari from zooming the page when a field
 * gets focus, which is the single biggest "this feels janky" fix on phones.
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
    input,
    select,
    textarea {
        font-size: 16px;
    }
}

/* ---------------------------------------------------------------------------
 * Respect the user's motion preference (also skips the entrance animations the
 * theme triggers on scroll).
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .products-grid .product-item,
    .page-footer {
        content-visibility: visible;
    }
}