/*
 Theme Name:   Runbot.co Starter Theme
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Phil Burton
 Author URI:   https://runbot.co
 Template:     generatepress
 Version:      2.0
*/

/* -------------------------------------------------------------------------------
   Variables
---------------------------------------------------------------------------------- */
:root{
	--radius: 40px;
	--button-radius: 0;
	--input-radius: 4px;
	--shadow: 0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04); /* Just a basic general shadow */
	
	--gb-container-width: 100%;
	--site-width: var(--gb-container-width, 1440px);
	--site-wrapper: 2560px; /* Set to 100vw / 100% if not used */
	
	/* Gutter */
	--gutter: 193.33334px;
	
	/* Gap (between columns) */
	--gap: 3.6584vw;
	
	
	/* Space (vertical, ie. sections etc) */
	/* poschis clamps
	--space-xs: clamp(1.5rem, 1.58092vw + 12.86px, 53.33px);
	--space-m: clamp(5px, 2.97600vw + 57.14px, 133.33px);
	--space-l: clamp(6rem, 4.09208vw + 68.57px, 173.33px);
	--space-xl: clamp(7rem, 9.30078vw + 28.57px, 266.67px);
	 */
	
	/* DELETE EVENTUALLY @link https://utopia.fyi/space/calculator?c=360,24,1.2,1240,80,1.25,5,2,&s=0.5,1.5|2|3,s-l&g=s,l,xl,12 */
	--space-xs: clamp(0.75rem, 0.0341rem + 3.1818vw, 2.5rem);
	--space-s: clamp(1.5rem, 0.0682rem + 6.3636vw, 5rem);
	--space-m: clamp(2.25rem, 0.1023rem + 9.5455vw, 7.5rem);
	--space-l: clamp(3rem, 0.1364rem + 12.7273vw, 10rem);
	--space-xl: clamp(4.5rem, 0.2045rem + 19.0909vw, 15rem);
	
	/* Typography Sizes
	/* needs to be new MAYBE
	--text-3xs: clamp(0.5124rem, 0.3419rem + 0.4263vw, 1.024rem);
	--text-2xs: clamp(0.6149rem, 0.3932rem + 0.5543vw, 1.28rem);
	--text-xs: clamp(0.7378rem, 0.4505rem + 0.7185vw, 1.6rem);
	 */
	
	
	/* -------------- */
	
	--text-xl: 160px;
	--text-l: 120px;
	--text-ml: 93.33334px;
	--text-m: 66.66667px;
	--text-sm: 53.3px; /* Generated with claude */
	--text-s: 40px;
	--text-xs: 26.66667px;
	--text-2xs: 21.33334px;
	
	--text-body: 40px;
	
}

@media screen and (max-width: 2560px) {
  :root {
	--gutter: 7.55209vw;
	  
    --text-xl: 6.25vw;
    --text-l: 4.6875vw;
    --text-ml: 3.64584vw;
    --text-m: 2.60417vw;
	--text-sm: 2.08340vw;
    --text-s: max(20px, 1.5625vw);
	--text-xs: 1.04167vw;
	--text-2xs: 0.83334vw;
	  
	--text-body: max(20px, 1.5625vw);
  }
}

@media screen and (max-width: 1920px) {
  :root {
    --text-xs: 20px;
	--text-2xs: 16px;
  }
}

@media screen and (max-width: 1560px) {
  :root {
    --text-xs: 18px;
	--text-2xs: 14px;
  }
}

@media screen and (max-width: 1200px) {
  :root {
    --gutter: 3.90625vw;
  }
}

@media screen and (max-width: 1024px) {
  :root {
	--gutter: 5.33334vw;  
	
    --text-xl: 9.11459vw;
    --text-l: 6.77084vw;
    --text-ml: 4.42709vw;
    --text-m: 4.42709vw;
  }
}

@media screen and (max-width: 768px) {
  :root {
    --text-xl: 10.13334vw;
    --text-l: 10.13334vw;
    --text-ml: 7.46667vw;
    --text-m: 7.46667vw;
	--text-2xs: 12px;
  }
}


/* -------------------------------------------------------------------------------
   Setup
---------------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

.screen-reader-text:focus {
    background-color: var(--color-background);
    border-radius: 15em;
    box-shadow: none;
    clip: auto!important;
    clip-path: none;
    color: var(--color-primary);
    display: block;
    border: none;
    font-size: 64%;
    font-weight: 700;
    letter-spacing: -.02em;
    height: auto;
    left: 1em;
    line-height: normal;
    padding: .5em 1em;
    text-decoration: none;
    top: 1em;
    width: auto;
    z-index: 100000
}

body :focus-visible,
body .wsf-button:focus-visible {
    outline-width: 2px;
    outline-style: solid;
    outline-color: var(--color-primary);
    outline-offset: 2px
}

body .wsf-button:focus-visible,
body .button-accent:focus-visible {
    outline-color: var(--color-primary)
}

body :not(.gb-button,.site-logo a,.wsf-button):focus-visible,
body .mobile-nav-items a:focus-visible,
body a.button-text:focus-visible {
    outline: thin dotted currentcolor;
    outline-color: currentcolor;
    outline-style: dotted;
    outline-width: thin
}

body, button, input, select, textarea {
    -webkit-font-smoothing: antialiased;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

img, source, video {
    height: auto;
    max-width: 100%;
    width: 100%;
	vertical-align: top;
}

select::-ms-expand { display: none; }

body{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100vh;
    min-height: 100vh;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
	font-feature-settings: 'ss02' 0;
}

/* Headline */
h1, h2, h3, h4, h5, h6, .is-h1, .is-h2, .is-h3, .is-h4, .is-h5, .is-h6 { margin: 0; letter-spacing: -0.02em; margin-bottom: 0.25em; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .is-h1 a, .is-h2 a, .is-h3 a, .is-h4 a, .is-h5 a, .is-h6 a { font-weight: inherit; color:inherit; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, .is-h1 a:hover, .is-h2 a:hover, .is-h3 a:hover, .is-h4 a:hover, .is-h5 a:hover, .is-h6 a:hover { color:inherit; }

h1, .is-h1 { font-size: var(--text-xl); line-height: 1.1; letter-spacing: -0.05em; }
h2, .is-h2 { font-size: var(--text-l); line-height: 1.22; letter-spacing: -0.04em;  }
h3, .is-h3 { font-size: var(--text-ml); line-height: 1.27; letter-spacing: -0.04em;  }
h4, .is-h4 { font-size: var(--text-m); line-height: 1.3; letter-spacing: -0.04em; }
h5, .is-h5 { font-size: var(--text-sm); line-height: 1.47; letter-spacing: -0.03em; }
h6, .is-h6 { font-size: var(--text-s); line-height: 1.55; letter-spacing: -0.03em; }

.is-p{
	font-family: inherit; /* copy from the body */
	font-size: inherit; /* copy from the body */
	line-height: inherit;
	color: var(--color-text-muted);
	font-weight: 500; /* copy from the body */
	letter-spacing: 0; /* copy from the body */
	margin: 0;
	margin-bottom: 1.5em;
}

/*p + h1, 
p + h2, 
p + h3, 
p + h4, 
p + h5, 
p + h6 {
  margin-top: 1.5em;
}*/

/* Shadow */
.shadow-x-small { box-shadow: var(--shadow-x-small); }
.shadow-small { box-shadow: var(--shadow-small); }
.shadow-medium { box-shadow: var(--shadow-medium); }
.shadow-large { box-shadow: var(--shadow-large); }
.shadow-x-large { box-shadow: var(--shadow-x-large); }
.shadow-xx-large { box-shadow: var(--shadow-xx-large); }
.shadow-img{ box-shadow: var(--shadow-img); }

/* Button Reset */
button {
    -webkit-appearance: none;
    border-radius: 0;
    text-align: inherit;
    background: none;
    box-shadow: none;
    padding: 0;
    cursor: pointer;
    border: none;
    color: inherit;
    font: inherit;
}

/* -------------------------------------------------------------------------------
   Theme Tweaks
---------------------------------------------------------------------------------- */
.site-header {
    padding-inline: var(--gap);
}

/* Constrain the width of the page if wanted */
.site-wrapper {
    width: 100%;
    max-width: var(--site-wrapper);
    margin-inline: auto;
    background: var(--color-background);
	overflow: hidden;
}

@media screen and (min-width: 2560px) {
	.site-wrapper::after {
        content: "";
        display: block;
        width: calc((100% - var(--site-wrapper)) / 2);
        height: 100%;
        background: var(--color-outer-background);
        position: fixed;
        right: 0;
        top: 0;
		z-index: 1;
    }
	.site-wrapper::before {
        content: "";
        display: block;
        width: calc((100% - var(--site-wrapper)) / 2);
        height: 100%;
        background: var(--color-outer-background);
        position: fixed;
        left: 0;
        top: 0;
		z-index: 1;
    }
}
   


/* Balance headings and elements with .balance class */
:is(h1, h2, h3, h4, h5, h6), .balance {
    text-wrap: balance;
}

/* Use pretty wrapping for body text elements */
p, blockquote, li, .pretty {
    text-wrap: pretty;
}

/* Remove bottom margin from final paragraph */
p:last-child:last-of-type {
    margin-bottom: 0;
}

/* -------------------------------------------------------------------------------
   Utilities
---------------------------------------------------------------------------------- */
/* Line Limit */
.line-limit-3, .line-limit-2{
	display: -webkit-box;
	box-orient: vertical;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.line-limit-3{
	line-clamp: 3;
	-webkit-line-clamp: 3;
}

.line-limit-2{
	line-clamp: 2;
	-webkit-line-clamp: 2;
}

/* Icon without fill */
html .icon-nofill svg, html .gb-icon svg, .nofill, .nofill svg{
    fill: none!important;
}

/* No Underline */
.no-ul, .no-ul a{
    text-decoration: none;
}

/* Noselect */
.noselect {
    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
}

/* Horizontal Divider */
hr, hr.wp-block-separator {
    background-color: var(--color-text);
    border: 0;
    height: 1px;
    margin-bottom: clamp(1.5rem,1.197rem + 1.515vw,2.5rem);
    margin-top: clamp(1.5rem,1.197rem + 1.515vw,2.5rem);
}

/* Vertical Text */
.vertical{
    white-space: nowrap;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* Rotation */
.rotate{
	transform-origin: center;
    animation: rotate 28s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Visually Hidden (accessible to screen readers) */
.visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Smooth Transition Utility */
.transition {
    transition: all 0.25s ease;
}

/* Stretch Link */
.stretch-link {
    position: relative;
}

.stretch-link a::after {
    content: '';
    position: absolute;
    inset: 0;
}

.stretch-link a:is(:focus-visible)::after {
    outline: 2px solid;
}

.stretch-link a:is(:hover, :focus) {
    outline: none;
}

/* -------------------------------------------------------------------------------
   Accordion
---------------------------------------------------------------------------------- */
body:not(.editor-styles-wrapper) .gb-accordion__content {
    transition: color 0.3s ease, max-height .7s cubic-bezier(.2,1,.22,1)!important;
}

body:not(.editor-styles-wrapper) .gb-accordion__content>div {
    will-change: opacity;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .5s cubic-bezier(.2,1,.22,1) , transform .7s cubic-bezier(.2,1,.22,1)
}

body:not(.editor-styles-wrapper) .gb-accordion__item-open .gb-accordion__content>div {
    opacity: 1;
    transform: translateY(0)
}

body:not(.editor-styles-wrapper) .gb-accordion__content {
    visibility: visible!important
}

/* -------------------------------------------------------------------------------
   Testimonials Masonry
---------------------------------------------------------------------------------- */
.testimonials-masonry{
	column-count: 3;
	column-gap: 1em;
}

.testimonials-masonry > *{
	margin-top: 1em;
}

@media screen and (max-width: 1024px) {
    .testimonials-masonry{
		display: flex;
		flex-direction: column;
		gap: 1em;
	}

	.testimonials-masonry > *{
		margin-top: unset;
	}
}

/* -------------------------------------------------------------------------------
   Marquee
------------------------------------------------------------------------------- */
.marquee { --gap: 0.5em; display: flex; gap: var(--gap); overflow: hidden; position: relative; }
.marquee-content { animation: scroll 60s linear infinite; display: flex; align-items: center; flex-shrink: 0; gap: var(--gap); justify-content: space-around; min-width: 100%; white-space: nowrap; will-change: transform; }
.marquee-content-item { white-space: nowrap; }
.marquee.logo-marquee { --gap: 2.5em; }
.marquee.logo-marquee img { height: 80px; }

@-webkit-keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-100% - var(--gap))); }
}
@keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-100% - var(--gap))); }
}

.marquee-reverse .marquee-content { animation-direction: reverse; }

/* -------------------------------------------------------------------------------
   Scrollstack
------------------------------------------------------------------------------- */
@media screen and (min-width: 1025px) {
    .scrollstack__card {
		position: sticky;
		top: 5em;
		transition: transform 0.3s;
	}
	.scrollstack__card:nth-child(1) { transform: translateY(1em); }
	.scrollstack__card:nth-child(2) { transform: translateY(2em); }
	.scrollstack__card:nth-child(3) { transform: translateY(3em); }
	.scrollstack__card:nth-child(4) { transform: translateY(4em); }
	.scrollstack__card:nth-child(5) { transform: translateY(5em); }
}