/*===================================================================================*/
/*	CUSTOM CSS STYLES
/*===================================================================================*/

/* Insert your own styles in here! */

/* while hovering over picture of team member */
.member .text-overlay .info .social li a:hover .fa-linkedin {
    color: var(--brand-linkedin);
}

/* navbar at top */
body > header > div > div.navbar-header {
	border-color: var(--brand-navbar-top);
	background-color: var(--brand-navbar-top);
}

/* yamm (second navbar from top) */
body > header > div > div.yamm > div > div {
	border-color: var(--brand-navbar);
	background-color: var(--brand-navbar);
}

/* navbar once collapsed */
.navbar-collapse.collapse.animate-after {
    background-color: rgba(var(--brand-navbar-rgb), 0.97);
}

/* kono logo size */
.navbar-brand img {
    height: 75px;
}

/* make sure header is tall enough when compressed for mobile screens */
.navbar-header a {
	height: 60px;
}

/* background images */
.img-bg, .img-bg-center {
    background-size: 10%;
}

/* owl carousel fade transition (overrides owl.transitions.css, which is kept as vendor) */
.owl-fade-out,
.owl-fade-in {
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;
}

/* keep the carousel dots inside the hero, so they never hang over the section below */
#hero #owl-main .owl-pagination,
#hero #owl-main:hover .owl-pagination {
    bottom: 0;
}

/* hero grows with its text: fixed heights from the theme let wrapped captions spill into the section below */
#hero #owl-main,
#hero #owl-main .item {
    height: auto !important;
    min-height: 61vh;
}
#hero #owl-main .container {
    min-height: inherit;
}
@media (max-width: 767px) {
    #hero #owl-main,
    #hero #owl-main .item {
        min-height: 88vh;
    }
}
@media (min-width: 768px) and (max-height: 768px) {
    #hero #owl-main,
    #hero #owl-main .item {
        min-height: 480px;
    }
}

/* footer "latest works" strip: cards scroll right to left, one card every 4 seconds */
/* --n is the number of published case studies, set inline by _footer.html */
.case-strip {
    --visible: 1;
    position: relative;
    overflow: hidden;
}
@media (min-width: 768px) {
    .case-strip {
        --visible: 2;
    }
}
@media (min-width: 992px) {
    .case-strip {
        --visible: 4;
    }
}

/* the track holds two copies of the cards, so moving half its width loops it seamlessly */
.case-strip-track {
    display: flex;
    width: calc(var(--n) * 2 / var(--visible) * 100%);
    animation: case-strip-scroll calc(var(--n) * 4s) linear infinite;
}
.case-strip:hover .case-strip-track {
    animation-play-state: paused;
}
@keyframes case-strip-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.case-strip-item {
    flex: 0 0 calc(100% / (var(--n) * 2));
    box-sizing: border-box;
    padding: 0 5px;
}
.case-strip-item img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* keep the blue hover overlay but drop the plus mark (the theme draws it with ::before) */
.case-strip .icon-overlay a .icn-more:before {
    content: none;
}

/* title shown on the blue hover overlay */
.case-strip-title {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 101;
    padding: 6px 10px;
    color: #fff;
    font-size: 14px;
    line-height: 1.3;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease-out;
}
.case-strip-item:hover .case-strip-title {
    opacity: 1;
}

/* no motion: stop the scroll and let visitors scroll the strip by hand */
@media (prefers-reduced-motion: reduce) {
    .case-strip {
        overflow-x: auto;
    }
    .case-strip-track {
        animation: none;
    }
}

/* headings that the theme styles as h1 but that are h2 in the markup (one h1 per page); these keep the h1 sizes */
.section-title {
    font-size: 44px;
    line-height: 130%;
    margin-bottom: 25px;
}
.hero-title {
    position: relative;
    font-size: 78px;
    line-height: 110%;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: 0;
}
@media (max-width: 767px) {
    .section-title {
        font-size: 33px;
        line-height: 120%;
        margin-bottom: 20px;
        letter-spacing: .0125em;
    }
    .hero-title {
        font-size: 38px;
        line-height: 115%;
        letter-spacing: .031em;
    }
}

/* Space below the privacy text matches the space between the header and the heading. */
.privacy-page {
	padding-bottom: 25px;
}

/*===================================================================================*/
/*	BODY TEXT LINKS
/*===================================================================================*/

/* Links in body text are bold and navy, so they stand out from the grey-blue body text without an underline.
   On hover and keyboard focus, an underline appears too. Buttons, the case-study links and the chat buttons keep
   their own styles. This file loads last, so these rules override the template's link styles without editing the
   vendor theme files. */
:is(main p, .privacy-page) a:not(.txt-btn, .btn, .chat-book, .chat-new, [data-booking]) {
	color: var(--brand-navbar);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 0;
	transition: color 200ms ease-out;
}

:is(main p, .privacy-page) a:not(.txt-btn, .btn, .chat-book, .chat-new, [data-booking]):is(:hover, :focus-visible) {
	color: var(--brand-navbar);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}