/**
 * Custom CSS for scata.fi
 *
 * Loaded on the front end by scata-custom-code.php. The theme's own stylesheet is enqueued
 * before this one, so a rule of equal specificity here wins without needing !important.
 */

@media (max-width:475px) {
    #app #main_countedown_1 .element_conteiner {
        min-width:calc(25% - 10px);
    }
    #app #main_countedown_1 .time_left {
        font-size:22px;
    }
}
:root {
	--scata-navy: #1C3A63;
	--scata-navy-deep: #122745;
	--scata-navy-soft: #2A4B78;
	--scata-sand: #C8A67A;
	--scata-sand-soft: #E9DCC7;
	--scata-steel: #6E92BC;
    --scata-white: #ffffff;
}
.scata-color-navy {
	color:var(--scata-navy);
}
.scata-color-navy-soft {
	color:var(--scata-navy-soft);
}
.scata-color-navy-deep {
	color:var(--scata-navy-deep);
}
.scata-color-sand {
	color:var(--scata-sand);
}
.scata-color-sand-soft {
	color:var(--scata-sand-soft);
}
.scata-color-steel {
	color:var(--scata-steel);
}
.scata-heading-font {
    font-family:var(--gds-heading-font-family);
}
.font-weight-500 {
    font-weight:500;
}
.text-transform-uppercase {
	text-transform:uppercase;
}
.mt-0 { 
    margin-top:0 !important;
}
.mb-0 {
    margin-bottom:0 !important;
}
.ml-0 {
    margin-left:0 !important;
}
.mr-0 {
    margin-right:0 !important;
}
.has-max-width-540 {
    max-width:540px !important;
}
.has-max-width-700 {
    max-width:700px !important;
}
.has-border-radius-5 {
    border-radius:5px;
    >img {
        border-radius:5px;
    }
}
.has-hero-heading {
    display:flex;
    align-items:flex-end;
}
@media (max-width: 781px) {
    body.page.hero #app .wp-block-cover.has-hero-heading:first-child {
        display: flex;
        align-items: flex-end;
        padding: var(--block-gutter-m) var(--viewport-gutter) !important;
        background: black;
        min-height:42vw !important;
    }
}
@media (max-width:782px) {
    .left-align-mobile {
        text-align: left !important;
    }
}
.scata-tagline {
	text-transform:uppercase;
	margin-bottom:20px !important;
	letter-spacing:.18em;
}
.scata-tagline.mb-0 {
    margin-bottom:0 !important;
}
.wp-block-separator.scata-short-separator {
    width:150px;
    margin-left:0 !important;
    height:2px;
    opacity:1;
}
.scata-heading {
	margin-top:20px !important;
    &.mt-0 { 
        margin-top:0 !important;
    }
}
.scata-heading-24 {
    font-size:clamp(1.25rem,0.357vw + 18.86px,1.5rem);
}
h1.scata-heading, .scata-heading.h1 {
	font-size:clamp(1.875em,1.875em + 1.125 * (100vw - 23.4375em)/64.0625,3.5em);
}
h3.scata-heading, .scata-heading.h3 {
	font-size:clamp(1.375em,1.375em + 0.375 * (100vw - 23.4375em)/64.0625,1.75em);
}
.scata-heading-line-left {
    padding-left:28px;
    position:relative;
    font-family:var(--gds-heading-font-family);
}
.scata-heading-line-left::before {
    content:"";
    display:block;
    height:100%; 
    width:2px;
    background-color:var(--scata-sand);
    position:absolute;
    left:0;
    top:0;
}
.scata-heading-and-text {
    display:flex;
    flex-direction:row;
    align-items:center;
    margin:0 !important;
    width:100%;
    max-width:100% !important;
    .scata-heading {
        font-size: clamp(1.875em, calc(0.9146em + 4.1006vw), 5.5em);
        white-space:pre;
        font-weight:500;
    }
    .scata-heading-text {
        position:relative;
        margin-top:0 !important;
        padding-left:1.5em;
        margin-left:1.5em;
        font-size: clamp(1.875em, calc(0.9146em + 4.1006vw), 2.5em);
        text-transform:uppercase;
        line-height:1.1;
        font-family:var(--gds-heading-font-family);
        letter-spacing:1.2px;
        font-weight:600;
    }
    .scata-heading-text::before {
        content:"";
        display:block;
        height:100%; 
        width:2px;
        background-color:var(--scata-sand);
        position:absolute;
        left:0;
        top:0;
    }
}
.scata-hero-video-group {
    margin-top:calc(var(--block-gutter-l) * -1) !important;
    margin-bottom:calc(var(--block-gutter-l) * -1) !important;
    padding:0 !important;
}
@media (max-width:782px) {
    .scata-hero-video-group {
        display: flex;
        flex-direction: column-reverse;
        margin-top: 60px !important;
    }
}
.scata-hero-video-heading {
    max-width:90% !important;
    h1,.h1 {
        font-size: clamp(1.25em, calc(0.9146em + 4.1006vw), 5.5em);
        font-weight: 500;
        line-height:1;
        margin-bottom:0 !important;
    }
    p {
        margin-top:10px !important;
        font-size: clamp(1.1em, calc(0.9146em + 4.1006vw), 1.75em);
        line-height:1;
        letter-spacing:1.2px;
    }
}
@media (max-width:1025px) {
    .scata-hero-video-heading {
        p {
            font-size:20px;
        }
    }
}
@media (max-width:768px) {
    .scata-hero-video-heading {
        position:initial !important;
        padding:var(--block-gutter-xl) var(--viewport-gutter);
        margin:0 !important;
        h1 {
            font-size:36px;
            color:var(--scata-navy-deep);
        }
        p {
            font-size:16px !important;
            color:var(--scata-navy-deep);
        }
    }
}
@media (max-width:500px) {
    .scata-hero-video-heading {
        h1 {
            font-size:28px !important;
        }
    }
}
@media (max-width:1025px) {
    .scata-hero-video-heading {
        p {
            font-size:20px;
        }
    }
}
@media (min-width: 64em) and (width > 1460px) {
    .scata-hero-video-heading {
        margin-left: calc(var(--grid-gutter) * 1.5) !important;
        margin-right: calc(var(--grid-gutter) * 1.5) !important;
    }
}
@media (min-width: 64em) and (width > 2000px) {
    .scata-hero-video-heading {
        margin-left: auto !important;
        margin-right: auto !important;         
        max-width: 1800px !important;
        left: 50% !important;
        transform: translateX(-50%);
    }
}
.scata-tactical-scenarios-columns {
    display: grid !important; 
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}
@media (max-width:568px) {
    .scata-tactical-scenarios-columns {
        grid-template-columns: repeat(auto-fit, minmax(150px, 200px));
        img {
            max-width:200px;
            object-fit:contain;
        }
    }
}
.scata-glass-box {
	margin-top:0 !important;
	border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 28px;
    background: rgba(18, 39, 69, .35);
    backdrop-filter: blur(6px);
    padding: clamp(28px, 4vw, 56px);
}
.scata-buttons .wp-block-button__link {
	background:var(--scata-sand);
	color:var(--scata-navy-deep);
	text-transform:uppercase;
}
.wp-block-cover.scata-hero-img-with-logo {
    .wp-block-cover__inner-container {
        position:absolute;
        bottom:-5vw;
        left:-3vw;
        * {
            width:100vw;
            max-width:100vw;
        }
        .wp-block-heading {
            font-size:calc(24.25vw + 1.5vw);
            white-space:pre;
            line-height: 0.9;
            transform: scaleY(0.75);
        }
    }
}
/* SCATA PRODUCT IMAGE CARD */
.scata-product-image-card {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius:5px;
    >img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .scata-product-image-overlay {
        position: absolute;
        left: 0;
        bottom: 0;
        padding: 28px;
        >* {
            color:#fff;
        }
        h2 {
            font-size: clamp(2.6em, calc(2.32em + 1.1667vw), 4em);
        }
    }
}
.scata-specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    width: max-content;
    max-width: 100% !important;
    .scata-spec:not(:last-child) {
        border-right:2px solid var(--scata-sand);
        padding-right:25px;
        margin-right:25px;
    }
}
.scata-spec {
    margin-bottom:20px;
    h2 {
        margin-bottom:0 !important;
        color:var(--scata-steel);
        font-weight:500;
        text-transform:uppercase;
        letter-spacing:3.2px;
    }
    .scata-spec-label {
        margin-top:0 !important;
        margin-bottom:0 !important;
        text-transform:uppercase;
        letter-spacing:1.2px;
        font-size:20px;
        font-weight:500;
    }
    .scata-spec-subline {
        font-size:16px;
        max-width: 275px;
        width: 100%;
    }
}
.scata-economics-heading {
    font-weight:500 !important;
    letter-spacing:3.2px;
    text-transform:uppercase;
}
.scata-economics {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    width: max-content;
    max-width: 100% !important;
    margin-top:60px !important;
    .scata-economic:not(:last-child) {
        border-right:2px solid var(--scata-sand);
        padding-right:35px;
        margin-right:35px;
    }
}
.scata-economic {
    margin-bottom:20px;
    h2 {
        margin-bottom:0 !important;
        font-weight:500;
        letter-spacing:3.2px;
        font-size:24px;
    }
    p {
        margin-top:0 !important;
        text-transform:uppercase;
        letter-spacing:1.2px;
        font-size:18px;
        font-weight:500;
    }
}
.scata-doctrine-columns {
    padding:120px 40px;
    background-image:url(https://scata.fi/app/uploads/2026/09/vy1-1200x584.jpg);
    background-size:cover;
    border-radius:5px;
    .wp-block-column {
        .scata-group-wrapper {
            max-width:245px;
            width:100%;
            margin-left:auto;
            margin-right:auto;
            p {
                font-family:var(--gds-heading-font-family);
                margin-top:0 !important;
                display:flex;
                flex-direction:row;
                line-height:1;
                font-size:1.4rem;
                align-items:flex-start;
                strong {
                    font-family:var(--gds-heading-font-family);
                    color:var(--scata-sand);
                    margin-right:10px;
                    white-space:pre;
                    font-size:3.25rem;
                    line-height:0.8;
                }
            }
            figure {
                display: flex;
                align-items: center;
                min-height:100px;
                margin-bottom:25px;
                img {
                    max-width:180px;
                    max-height:120px;
                    min-height:120px;
                    object-fit:contain;
                }
            }
        }
    }
}
@media (min-width:782px) {
    .scata-doctrine-columns {
        flex-wrap:wrap !important;
        .wp-block-column {
            flex-basis:initial !important;
        }
    }
}
@media (max-width:782px) {
    .scata-doctrine-columns {
        padding:60px 25px;
        .scata-group-wrapper {
            display:flex;
            flex-direction:column;
            justify-content: center;
        }
        .wp-block-column {
            margin-bottom:25px;
        }
    }
}
.scata-differentiators-columns {
    .scata-group-wrapper {
        max-width:250px;
        width:100%;
        margin-left:auto;
        margin-right:auto;
    }
    .wp-block-column {
        p:first-child {
            font-family:var(--gds-heading-font-family);
            font-size:3.25rem;
            color:var(--scata-sand);
            font-weight:500;
            white-space:pre;
            margin-bottom:0 !important;
        }
        p:nth-child(2) {
            margin-top:5px !important;
            margin-bottom:0 !important;
            color:var(--scata-sand-soft);
            text-transform:uppercase;
            font-size:18px;
        }
        p:last-child {
            margin-top:0 !important;
            font-family:var(--gds-heading-font-family);
            color:var(--scata-white);
            font-size:26px;
            font-weight:500;
        }
    }
}
@media (max-width:782px) {
    .scata-differentiators-columns {
        .wp-block-column {
            display:flex;
            flex-direction:column;
            justify-content: center;
            margin-bottom:25px;
            p {
                text-align:center;
            }
        }
    }
}

body {
    /* Mapping GDS colors (Old version of site) to new colour palette */
    --gds-color-dark-green: var(--scata-navy-deep);
    --wp--preset--color--primary: var(--scata-navy-deep);
    
    --gds-color-army-green: var(--scata-navy);
    --wp--preset--color--army-green: var(--scata-navy);

    --gds-color-pale-green: var(--wp--preset--color--white);
    --wp--preset--color--pale-green: var(--wp--preset--color--white);

    --gds-color-lime-green: var(--scata-sand);
    --wp--preset--color--lime-green: var(--scata-sand);

    --gds-color-beige: var(--scata-sand-soft);
    --wp--preset--color--secondary: var(--scata-sand-soft);

    --gds-color-primary: var(--scata-navy-deep);
    --gds-color-secondary: var(--scata-sand-soft);

    --gds-color-gray: var(--scata-sand);

    --gds-color-light-gray: var(--scata-sand-soft);
    --wp--preset--color--light-gray: var(--scata-sand-soft);

    /* GDS overrides */
    --gds-body-line-height: 1.2;

    /* WHITE LOGO */
    .header__logo {
        img {
            filter: brightness(0) invert(1);
        }
    }

    /* BUTTONS */
    .wp-block-buttons .wp-block-button .wp-block-button__link.has-army-green-background-color, button.gform_button {
        background-color:var(--scata-sand) !important;
        color:var(--scata-navy-deep) !important;
        text-transform:uppercase;
    }

    /* NAV MENU */
    .header__navigation .menu-item__link.is-last {
        background-color:var(--scata-sand);
        color:var(--scata-navy-deep);
        text-transform:uppercase;
        letter-spacing:1.2px;
    }
    /* MOBILE MENU */
    .header .header__menu-toggler {
        color:var(--scata-sand) !important;
    }

    /* GROUPS & COVERS */
    .wp-block-cover.alignfull,
    .wp-block-group.alignfull {
        padding: var(--block-gutter-xxl) var(--viewport-gutter);
    }
    .wp-block-cover.has-hero-heading {
        padding-bottom:var(--block-gutter-m);
    }
    .wp-block-cover:first-child {
        max-height:66vh !important;
    }

    /* FOOTER */
    footer .content-info {
        background-color:var(--scata-sand) !important;
        p,a {
            color:var(--scata-navy-deep) !important;
        }
        svg {
            color:var(--scata-navy-deep);
        }
    }

    .is-style-team-card {
        background-color:var(--scata-sand-soft) !important;
        h1,h2,h3,h4,h5,h6,p,a {
            color:var(--scata-navy-deep) !important;
        }
    }

    .wp-block-gds-contact-item__icon,.wp-block-safe-svg-svg-icon {
        color:var(--scata-navy-deep);
        svg {
            color:var(--scata-navy-deep);
        }
    }

    .wp-image-53 {
        display:none !important;
    }


    /* TEXT ANIMATIONS */
    /* Base state */
    .reveal-up {
        opacity: 0;
        transform: translateY(35px);
        transition:
            opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: opacity, transform;
    }

    /* Visible state added by JS */
    .reveal-up.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Optional variants */
    .reveal-fade {
        opacity: 0;
        transition: opacity 0.9s ease;
    }

    .reveal-fade.is-visible {
        opacity: 1;
    }

    .reveal-scale {
        opacity: 0;
        transform: scale(0.96);
        transition:
            opacity 0.8s ease,
            transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .reveal-scale.is-visible {
        opacity: 1;
        transform: scale(1);
    }


    /* Staggered animations */
    .reveal-delay-1 {
        transition-delay: 0.1s;
    }

    .reveal-delay-2 {
        transition-delay: 0.2s;
    }

    .reveal-delay-3 {
        transition-delay: 0.3s;
    }

    .reveal-delay-4 {
        transition-delay: 0.4s;
    }

    .reveal-delay-5 {
        transition-delay: 0.5s;
    }

    .reveal-delay-6 {
        transition-delay: 0.6s;
    }

    .hero-word-reveal {
        opacity: 0;
        transform: translateY(120px) scale(1.12);
        filter: blur(10px);

        transition:
            opacity 1s ease,
            transform 1.6s cubic-bezier(0.16, 1, 0.3, 1),
            filter 1s ease;

        will-change: transform, opacity, filter;
    }

    .hero-word-reveal.is-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }

    /* Typewriter reveal */
    .reveal-typewriter {
        opacity: 0;
    }

    .reveal-typewriter.is-visible {
        opacity: 1;
    }

    .reveal-typewriter-char {
        opacity: 0;
    }

    .reveal-typewriter-char.is-typed {
        opacity: 1;
    }

    .reveal-block-cover {
        overflow: hidden;
    }

    .reveal-block-cover .wp-block-cover__image-background {
        opacity: 0;
        transform: scale(1.08);
        filter: brightness(0) blur(10px);

        transition:
            opacity 1.6s ease,
            transform 2.1s cubic-bezier(0.16, 1, 0.3, 1),
            filter 1.9s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .reveal-block-cover.is-visible .wp-block-cover__image-background {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1) blur(0);
    }

    /* Reveal delays */
    .reveal-block-cover.reveal-delay-1 .wp-block-cover__image-background {
        transition-delay: 0.1s;
    }

    .reveal-block-cover.reveal-delay-2 .wp-block-cover__image-background {
        transition-delay: 0.2s;
    }

    .reveal-block-cover.reveal-delay-3 .wp-block-cover__image-background {
        transition-delay: 0.3s;
    }

    .reveal-block-cover.reveal-delay-4 .wp-block-cover__image-background {
        transition-delay: 0.4s;
    }

    /* Accessibility */
    @media (prefers-reduced-motion: reduce) {
        .reveal-up,
        .reveal-fade,
        .reveal-scale {
            opacity: 1;
            transform: none;
            transition: none;
        }
        .hero-word-reveal {
            opacity: 1;
            transform: none;
            filter: none;
            transition: none;
        }
        .reveal-typewriter,
        .reveal-typewriter-char {
            opacity: 1;
        }
    }
}

/* =========================================================
   PRODUCT SWITCHER
   ========================================================= */

.product-switcher {
    --ps-bg: var(--scata-navy-deep);
    --ps-border: rgba(255, 255, 255, 0.25);
    --ps-gold: var(--scata-sand);
    --ps-white: #ffffff;
    --ps-text: #ffffff;

    width: 100%;
    max-width: 1200px !important;
    margin: 0 auto;
    padding: 50px;

    box-sizing: border-box;

    border: 1px solid var(--ps-border);
    border-radius: 30px;
    background: rgba(18, 39, 69, .35);
    backdrop-filter: blur(6px);

    color: var(--ps-white);
}


/* =========================================================
   TABS
   ========================================================= */

.product-switcher__tabs {
  position: relative;

  display: grid;
  grid-template-columns: repeat(3, 1fr);

  width: 100%;
  height: 70px;

  background: rgba(255,255,255,.08);
  border-radius: 40px;

  overflow: hidden;
}


/* Animated white indicator */

.product-switcher__indicator {
    position: absolute;
    z-index: 1;
    top: 5px;
    left: 5px;
    width: calc((100% - 10px) / 3);
    height: calc(100% - 10px);
    background: #ffffff;
    border-radius: 40px;
    transform: translateX(0);
    transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
    pointer-events: none;
}



/* =========================================================
   TAB BUTTONS
   ========================================================= */

.product-switcher__tab {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  padding: 0 25px;

  border: 0;
  outline: 0;

  background: transparent;

  cursor: pointer;

  color: #fff;

  transition: color 0.3s ease;
}


.product-switcher__tab:focus {
  outline: none;
}


.product-switcher__tab:focus-visible {
  outline: 2px solid var(--ps-gold);
  outline-offset: -5px;
  border-radius: 40px;
}


.product-switcher__tab.is-active {
  color: var(--scata-navy-deep);
}


/* =========================================================
   TAB TEXT
   ========================================================= */

.product-switcher__name {
    display: block;
    font-family:var(--gds-heading-font-family);

    font-size: 20px;
    font-weight: 500;
    text-transform:uppercase;

    letter-spacing: 1.4px;
    line-height: 1.2;

    white-space: nowrap;
}


.product-switcher__spec {
    display: block;

    margin-top: 6px;

    font-size: 14px;
    font-weight: 400;
    text-transform:uppercase;

    letter-spacing: 1px;
    line-height: 1;

    opacity: 0.8;
}


/* =========================================================
   DIVIDER
   ========================================================= */

.product-switcher__divider {
  width: 100%;
  height: 1px;

  margin-top: 25px;

  background: rgba(255, 255, 255, 0.22);
}


/* =========================================================
   SLIDE CONTENT
   ========================================================= */

.product-switcher__content {
    text-align: center;
    padding-top: 25px;
    min-height:120px;
}


/* Slide heading */

.product-switcher__slide-heading {

  font-size: 35px;
  font-weight: 600;

  letter-spacing: 1px;

  color: var(--ps-gold);

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}


/* Slide text */

.product-switcher__slide-text {
  margin-top: 18px;

  font-size: 18px;
  font-weight: 400;
  min-height:60px;
  max-width:730px;
  width:100%;
  margin-left:auto;
  margin-right:auto;

  line-height: 1.5;

  color: var(--ps-text);

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}


/* =========================================================
   CONTENT TRANSITION
   ========================================================= */

.product-switcher__content.is-changing
.product-switcher__slide-heading,

.product-switcher__content.is-changing
.product-switcher__slide-text {
  opacity: 0;
  transform: translateY(5px);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 782px) {

  .product-switcher {
    padding: 35px 25px 65px;
    border-radius: 24px;
  }

  .product-switcher__tabs {
    height: 65px;
  }
  .product-switcher__tab {
    padding:0 15px;
  }

  .product-switcher__name {
    font-size: 11px;
    letter-spacing: 1px;
  }

  .product-switcher__spec {
    font-size: 10px;
    margin-top: 5px;
  }

  .product-switcher__slide-heading {
    font-size: 18px;
  }

  .product-switcher__slide-text {
    font-size: 15px;
  }
}


@media (max-width: 480px) {

  .product-switcher {
    padding: 28px 15px 55px;
    border-radius: 20px;
  }

  .product-switcher__tabs {
    height: 60px;
  }

    .product-switcher__tab {
    padding:0 10px;
  }

  .product-switcher__name {
    font-size: 9px;
    letter-spacing: 0.7px;
  }

  .product-switcher__spec {
    font-size: 7px;
    letter-spacing: 0.5px;
  }

  .product-switcher__content {
    padding-top: 22px;
  }

  .product-switcher__slide-heading {
    font-size: 16px;
  }

  .product-switcher__slide-text {
    font-size: 14px;
  }
}