/*!
 Theme Name: Rubrum
 Theme URI:
 Author: Dev Team
 Author URI:
 Description: Rubrum is a blank canvas for your ideas and it makes the block editor your best brush.
 Requires at least: 6.6
 Tested up to: 6.8.3
 Requires PHP: 8.0
 Version: 6.8
 Text Domain: rubrum
*/


/** Add your custom styles here **/


h3, h4, h5 {
    font-family: "Stack Sans Text", sans-serif !important;
}
h3 {
    color: var(--wp--preset--color--primary);
}
p a {
    text-decoration: underline;
}
.source {
    color: var(--wp--preset--color--tertiary);
    font-size: 14px;
    font-weight: 300;
}
@media (max-width: 767.98px) {
    .heading-main {
        line-height: 0.9 !important;
    }
}

.home-cover {
    height: 41.75vw;
    max-height: 668px;
}
.heading-control {
    max-width: 480px;
}
.heading-control-2 {
    max-width: 376px;
}
.heading-control-3 {
    max-width: 580px;
}

@media (max-width: 991.98px) {
    .is-content-justification-right > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
        margin-left: 0 !important;
        margin-right: auto !important;
    }
}


/** Marquee Scroller **/
.section-scrolling-text {
    /* Fix 1: overflow: clip prevents horizontal screen bouncing perfectly */
    overflow: clip;
    position: relative;
    display: flex;
    align-items: center;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);

    contain: paint;
    box-sizing: border-box;
}

/* The scrolling track */
.section-inner-scrolling-text {
    display: grid;
    /* Fix 3: Keep the 3 identical structural columns to eliminate short text gaps */
    grid-template-columns: repeat(3, max-content);
    width: max-content;
    will-change: transform;
    /* Fix 4: Set duration to account for the third structural loop layer */
    animation: marquee-scroll 36s linear infinite;

    /* Retain hardware layer isolation to block mobile scroll stutters */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

/* Each repeated message container */
.marquee-content {
    display: flex;
    align-items: center;
    justify-content: space-around;
    white-space: nowrap;
    /* Allowed text to breathe and calculate size naturally */
    width: max-content;
    padding-right: 40px;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* Individual text items */
.marquee-content > * {
    display: inline-flex;
    align-items: center;
}

/* The sub-pixel accurate loop matrix */
@keyframes marquee-scroll {
    0% {
        transform: translate3d(0px, 0px, 0px);
    }
    100% {
        /* Fix 5: Shifting exactly -33.3333% maps perfectly to a 3-column grid structure */
        transform: translate3d(-33.3333%, 0px, 0px);
    }
}

@media (max-width: 991.98px) {
    .section-inner-scrolling-text {
        animation: marquee-scroll 36s linear infinite;
    }
}

@media (max-width: 575.98px) {
    .section-scrolling-text {
        /* Fix 6: Keep breakout margin parameters matching across small mobile widths */
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
    }
    .marquee-content {
        /* Maintain spacing proportional to smaller viewports */
        padding-right: 20px;
        width: max-content;
    }
    .section-inner-scrolling-text {
        animation: marquee-scroll 18s linear infinite;
    }
}




/* Target the specific button using its unique data-bs-target attribute */
.carousel-timeline .carousel-indicators button {
    /* Reset Bootstrap default line look */
    width: 20px !important;
    height: 23px !important;
    border: none !important;
    background-color: transparent !important;
    opacity: 1 !important; /* Force full visibility */

    margin-right: 10px;
    margin-left: 10px;
    /* Apply grey SVG (#ACACAC) */
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="23" viewBox="0 0 20 23" fill="none"><path d="M1.42857 0.71066C1.42857 0.319797 1.10714 0 0.714286 0C0.321428 0 0 0.319797 0 0.71066L0.190877 22.2893C0.190877 22.6802 0.512305 23 0.905163 23C1.29802 23 1.61945 22.6802 1.61945 22.2893L1.42857 15.5857L19.3259 9.46955C19.7321 9.33186 20 8.95432 20 8.52792C20 8.10153 19.7277 7.72399 19.3259 7.5863L1.42857 1.47018V0.71066Z" fill="%23ACACAC"/></svg>') !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 23px !important;
}

/* Apply red SVG (#DA2724) on hover and active states */
.carousel-timeline .carousel-indicators button:hover,
.carousel-timeline .carousel-indicators  button.active {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="23" viewBox="0 0 20 23" fill="none"><path d="M1.42857 0.71066C1.42857 0.319797 1.10714 0 0.714286 0C0.321428 0 0 0.319797 0 0.71066L0.190877 22.2893C0.190877 22.6802 0.512305 23 0.905163 23C1.29802 23 1.61945 22.6802 1.61945 22.2893L1.42857 15.5857L19.3259 9.46955C19.7321 9.33186 20 8.95432 20 8.52792C20 8.10153 19.7277 7.72399 19.3259 7.5863L1.42857 1.47018V0.71066Z" fill="%23DA2724"/></svg>') !important;
    opacity: 1 !important;
}
.carousel-timeline .carousel-indicators {
    bottom: -64px;
    margin-right: auto !important;
    margin-left: auto !important;
}
.carousel-timeline .carousel-control-next, .carousel-timeline .carousel-control-prev {
    width: 40px !important;
}
.carousel-timeline .carousel-content--container {
    min-height: 188px !important;
    height: 48vw !important;
    max-height: 650px !important;
}

@media (max-width: 781.98px) {
    .carousel-desktop {
        display: none;
    }
}
@media (min-width: 782px) {
    .carousel-mobile {
        display: none;
    }
}

.carousel-mobile .carousel-content--container {
    min-height: auto !important;
    height: 75vh !important;
    max-height: 75vh !important;
}

.carousel-mobile .carousel-content--container .wp-block-image img {
    aspect-ratio: 782 / 1412 !important;
    max-height: 75vh !important;
    width: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
}


.icon-warning {
    height: 32px !important;
    width: 32px !important;
}

/** Footer **/

footer * a {
    text-decoration: none;
}