/* Accessibility: visually hide the skip link until it receives focus */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.skip-link.screen-reader-text:focus {
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* Sticky header variation */
.wp-site-blocks > header:has(.rinico-header-sticky) {
    position: sticky;
    top: 0;
    z-index: 100;
}

.admin-bar .wp-site-blocks > header:has(.rinico-header-sticky) {
    top: 32px;
}

@media (max-width: 782px) {
    .admin-bar .wp-site-blocks > header:has(.rinico-header-sticky) {
        top: 46px;
    }
}

/* Fallback when a saved Global Styles palette predates the Surface color */
.has-surface-color-background-color {
    background-color: var(--wp--preset--color--surface-color, #94969926);
}

/* Visible keyboard focus */
:where(a, button, input, select, textarea, summary, .wp-element-button):focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Light body text on dark backgrounds (the default text color is dark gray) */
.has-title-link-color-background-color:not(.has-text-color) {
    color: var(--wp--preset--color--text-color);
}

/* Dark palette: dark surfaces, light overlays and muted text keep their role (the Dark palette sets these custom colors; other palettes fall back to the preset) */
body .has-title-link-color-background-color {
    background-color: var(--wp--custom--color--dark-surface, var(--wp--preset--color--title-link-color)) !important;
}

body .has-button-text-color-background-color {
    background-color: var(--wp--custom--color--light-surface, var(--wp--preset--color--button-text-color)) !important;
}

body .has-content-color-background-color {
    background-color: var(--wp--custom--color--light-overlay, var(--wp--preset--color--content-color)) !important;
}

body :is(.wp-block-button__link, .wp-element-button).has-title-link-color-background-color.has-button-text-color-color {
    background-color: var(--wp--custom--color--strong-button, var(--wp--preset--color--title-link-color)) !important;
    color: var(--wp--custom--color--strong-button-text, var(--wp--preset--color--button-text-color)) !important;
}

body .has-bg-content-color-color {
    color: var(--wp--custom--color--muted-text, var(--wp--preset--color--bg-content-color)) !important;
}

body .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background-color: var(--wp--custom--color--stripe, #f0f0f0);
}

body .wp-block-table.is-style-stripes {
    border-bottom-color: var(--wp--custom--color--stripe, #f0f0f0);
}

/* Form fields follow the palette (browser defaults when the palette does not set them) */
body :where(input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="image"]), textarea, select) {
    background-color: var(--wp--custom--color--field, Field);
    color: var(--wp--custom--color--field-text, FieldText);
}

/* Text on the accent color stays dark in every palette, including Dark */
.has-primary-color-background-color,
.is-style-section-accent {
    --wp--preset--color--title-link-color: var(--wp--custom--color--on-primary, #12141d);
}

/* One-color theme images (logo, arrows, social icons) follow the palette, so they stay visible in Dark */
img[src*="/rinico/assets/images/logo.png"],
img[src*="/rinico/assets/images/process/arrow.png"],
img[src*="/rinico/assets/images/footer-logo/footer-light-logo.png"],
img[src*="/rinico/assets/images/service/services-icon.png"],
img[src*="/rinico/assets/images/team/arrow.png"],
img[src*="/rinico/assets/images/team/twitter.png"],
img[src*="/rinico/assets/images/team/linkedIn.png"],
img[src*="/rinico/assets/images/team/broswer.png"] {
    object-position: -99999px 0;
    background-color: var(--wp--preset--color--title-link-color);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

img[src*="/rinico/assets/images/footer-logo/footer-light-logo.png"],
img[src*="/rinico/assets/images/service/services-icon.png"],
img[src*="/rinico/assets/images/team/arrow.png"],
img[src*="/rinico/assets/images/team/twitter.png"],
img[src*="/rinico/assets/images/team/linkedIn.png"],
img[src*="/rinico/assets/images/team/broswer.png"] {
    background-color: var(--wp--preset--color--button-text-color);
}

img[src*="/rinico/assets/images/logo.png"] {
    -webkit-mask-image: url(../images/logo.png);
    mask-image: url(../images/logo.png);
}

img[src*="/rinico/assets/images/process/arrow.png"] {
    -webkit-mask-image: url(../images/process/arrow.png);
    mask-image: url(../images/process/arrow.png);
}

img[src*="/rinico/assets/images/footer-logo/footer-light-logo.png"] {
    -webkit-mask-image: url(../images/footer-logo/footer-light-logo.png);
    mask-image: url(../images/footer-logo/footer-light-logo.png);
}

img[src*="/rinico/assets/images/service/services-icon.png"] {
    -webkit-mask-image: url(../images/service/services-icon.png);
    mask-image: url(../images/service/services-icon.png);
}

img[src*="/rinico/assets/images/team/arrow.png"] {
    -webkit-mask-image: url(../images/team/arrow.png);
    mask-image: url(../images/team/arrow.png);
}

img[src*="/rinico/assets/images/team/twitter.png"] {
    -webkit-mask-image: url(../images/team/twitter.png);
    mask-image: url(../images/team/twitter.png);
}

img[src*="/rinico/assets/images/team/linkedIn.png"] {
    -webkit-mask-image: url(../images/team/linkedIn.png);
    mask-image: url(../images/team/linkedIn.png);
}

img[src*="/rinico/assets/images/team/broswer.png"] {
    -webkit-mask-image: url(../images/team/broswer.png);
    mask-image: url(../images/team/broswer.png);
}

@media print, (forced-colors: active) {
    img[src*="/rinico/assets/images/logo.png"],
    img[src*="/rinico/assets/images/process/arrow.png"],
    img[src*="/rinico/assets/images/footer-logo/footer-light-logo.png"],
    img[src*="/rinico/assets/images/service/services-icon.png"],
    img[src*="/rinico/assets/images/team/arrow.png"],
    img[src*="/rinico/assets/images/team/twitter.png"],
    img[src*="/rinico/assets/images/team/linkedIn.png"],
    img[src*="/rinico/assets/images/team/broswer.png"] {
        object-position: 50% 50%;
        background: none;
        -webkit-mask: none;
        mask: none;
    }
}

/* Header: tablets use the menu button too, so the menu, shop icons and button never wrap into extra rows */
@media (min-width: 600px) and (max-width: 1024px) {
    header .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex;
    }

    header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none;
    }
}

/* The open mobile menu uses the page background of the palette (white unless the palette sets it) */
body .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
    background-color: var(--wp--custom--color--light-surface, #fff);
}

/* WooCommerce */
.wc-block-components-product-sale-badge,
.woocommerce span.onsale {
    border: 0;
    border-radius: 50px;
    background-color: var(--wp--preset--color--primary-color);
    color: var(--wp--custom--color--on-primary, var(--wp--preset--color--title-link-color));
    font-weight: 600;
}

.wp-block-woocommerce-product-details h2,
.woocommerce-tabs h2 {
    font-size: var(--wp--preset--font-size--medium);
}

.woocommerce .wp-block-woocommerce-product-image-gallery {
    max-width: none;
}

/* Header: keep the logo readable and make room for shop icons on small screens */
header .wp-block-site-logo,
header .wp-block-image {
    flex-shrink: 0;
}

header .wp-block-button__link {
    white-space: nowrap;
}

@media (max-width: 480px) {
    header:has(.wp-block-woocommerce-mini-cart) .wp-block-buttons {
        display: none;
    }
}