/*
  Design refresh (pilot on the Minispielfeld site): readable type, one button colour, sticky header,
  hero headline and scroll animations. Loaded after custom.css by the layouts that use it; the
  animation classes are added by /Content/js/sg-motion.js. Raise ?v= in the layouts after changes.
*/
:root {
    /* Buttons use the primary colour, subheadings, icons and checkmarks the accent colour. */
    --sg-primary: #155f1c;
    --sg-primary-dark: #0e4413;
    --sg-primary-shadow: rgba(21, 95, 28, .25);
    --sg-accent: #155f1c;
    --sg-text: #333;
    --sg-ease: cubic-bezier(.2, .7, .2, 1);
}

/* en-US pages carry the SoccerGround USA logo: buttons and selections in Old Glory Blue, the blue of the
   US flag (hover goes lighter, as the colour is already very dark), subheadings and icons in the logo
   navy. Red is left to the flag in the logo; on buttons and checkboxes it read as a warning. */
html[lang="en-US"] {
    --sg-primary: #0a3161;
    --sg-primary-dark: #16427d;
    --sg-primary-shadow: rgba(10, 49, 97, .3);
    --sg-accent: #3b3b6f;
}

/* ---- Type ---- */
body {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--sg-text);
}

h1 {
    font-weight: 300;
}

h2 {
    font-weight: 400;
}

/* ---- Buttons: one colour everywhere ---- */
.btn-u,
.btn-u:focus {
    background: var(--sg-primary) !important;
    color: #fff !important;
    border: 0;
    border-radius: 4px;
    padding: 11px 22px;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    transition: background-color .2s, transform .2s var(--sg-ease), box-shadow .2s;
}

.btn-u:hover,
.btn-u:active {
    background: var(--sg-primary-dark) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px var(--sg-primary-shadow);
}

/* ---- Header: stays at the top, gets smaller and a shadow once the page scrolls ---- */
.one-page-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    transition: box-shadow .3s, padding .3s;
}

.one-page-header .navbar-brand img {
    transition: width .3s var(--sg-ease);
}

.sg-scrolled .one-page-header {
    box-shadow: 0 2px 14px rgba(0, 0, 0, .08);
}

@media (min-width: 992px) {
    .sg-scrolled .one-page-header .navbar-brand img {
        width: 190px;
    }
}

@media (max-width: 767px) {
    .one-page-header .navbar-brand img {
        width: 190px;
    }

    .sg-scrolled .one-page-header .navbar-brand img {
        width: 150px;
    }
}

/* ---- Hero: headline and button on the photo ---- */
.sg-hero {
    position: relative;
}

.sg-hero-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    padding: 180px 24px 56px;
    text-align: center;
    background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .45) 55%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

.sg-hero-overlay h1 {
    max-width: 900px;
    margin: 0 auto 22px;
    color: #fff;
    font-size: clamp(22px, 3.4vw, 44px);
    font-weight: 400;
    line-height: 1.2;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .55);
}

.sg-hero-overlay .btn-u {
    pointer-events: auto;
    padding: 13px 28px;
    font-size: 17px;
}

@media (max-width: 767px) {
    .sg-hero-overlay {
        padding: 90px 16px 20px;
        background: linear-gradient(to top, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .5) 60%, rgba(0, 0, 0, 0) 100%);
    }

    .sg-hero-overlay h1 {
        margin-bottom: 14px;
    }

    .sg-hero-overlay .btn-u {
        padding: 10px 18px;
        font-size: 15px;
    }
}

/* ---- Intro text below the hero ---- */
.sg-intro {
    margin-top: 56px;
    margin-bottom: 40px;
}

.sg-intro h2 {
    font-size: 18px;
    line-height: 1.7;
    font-weight: 400;
    color: var(--sg-text);
}

@media (max-width: 767px) {
    .sg-intro {
        margin-top: 36px;
        text-align: left !important;
    }

    .sg-intro h2 {
        font-size: 17px;
    }
}

/* ---- Image/text rows ---- */
.team-v7 .team-v7-in {
    vertical-align: middle;
    padding: 40px 56px;
}

.team-v7 .team-v7-in h1 {
    margin-top: 0 !important;
    font-size: clamp(27px, 2.6vw, 36px);
    line-height: 1.2;
}

.team-v7 .team-v7-in h2 {
    margin-top: 0;
    font-size: 19px;
    line-height: 1.35;
    color: var(--sg-accent);
}

.team-v7 .team-v7-in p {
    font-size: 16.5px;
    line-height: 1.65;
    color: #444;
}

.team-v7 .team-v7-img {
    overflow: hidden;
}

.team-v7 .team-v7-img img {
    transition: transform .9s var(--sg-ease);
}

.team-v7 .team-v7-img:hover img {
    transform: scale(1.03);
}

@media (max-width: 991px) {
    .team-v7 .team-v7-in {
        padding: 32px 20px 36px;
    }
}

/* ---- Scroll animations (classes set by sg-motion.js; without it everything is simply visible) ---- */
.sg-reveal {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity .6s ease, transform .7s var(--sg-ease);
    transition-delay: var(--sg-delay, 0ms);
}

.sg-reveal.sg-from-left {
    transform: translate3d(-48px, 0, 0);
}

.sg-reveal.sg-from-right {
    transform: translate3d(48px, 0, 0);
}

@media (max-width: 991px) {
    .sg-reveal.sg-from-left,
    .sg-reveal.sg-from-right {
        transform: translate3d(0, 24px, 0);
    }
}

.sg-reveal.sg-in {
    opacity: 1;
    transform: none;
}

.sg-hero-overlay > * {
    animation: sg-rise .8s var(--sg-ease) both;
}

.sg-hero-overlay > * + * {
    animation-delay: .15s;
}

@keyframes sg-rise {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sg-reveal,
    .sg-reveal.sg-in {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .sg-hero-overlay > *,
    .team-v7 .team-v7-img img,
    .btn-u {
        animation: none;
        transition: none;
        transform: none !important;
    }
}

/* Long German words in headlines (e.g. "Datenschutzerklärung") must not push the page wider on phones. */
@media (max-width: 767px) {
    h1,
    h2 {
        overflow-wrap: break-word;
        -webkit-hyphens: auto;
        hyphens: auto;
    }
}

/* ---- Configurator: picture updating after an option, bar with summary and inquiry on phones ---- */
#myCarousel .carousel-inner {
    transition: opacity .2s;
}

#myCarousel.sg-updating .carousel-inner {
    opacity: .45;
}

#myCarousel.sg-updating::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border: 3px solid rgba(255, 255, 255, .7);
    border-top-color: var(--sg-accent);
    border-radius: 50%;
    animation: sg-spin .8s linear infinite;
}

#myCarousel.sg-fresh .item.active img {
    animation: sg-fade-in .5s ease both;
}

@keyframes sg-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes sg-fade-in {
    from {
        opacity: 0;
    }
}

.sg-config-bar {
    display: none;
}

@media (max-width: 767px) {
    .sg-config-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        align-items: center;
        gap: 12px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: #fff;
        box-shadow: 0 -4px 18px rgba(0, 0, 0, .12);
        transition: transform .3s var(--sg-ease);
    }

    .sg-config-bar.sg-hidden {
        transform: translateY(110%);
    }

    .sg-config-bar-text {
        flex: 1;
        min-width: 0;
        font-size: 13px;
        line-height: 1.35;
    }

    .sg-config-bar-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        color: #444;
    }

    .sg-config-bar .btn-u {
        flex: none;
        max-width: 55%;
        padding: 10px 12px;
        font-size: 14px;
        white-space: normal;
        line-height: 1.2;
    }

    .sg-config-bar .btn-u .fa {
        display: none;
    }

    .sg-has-config-bar body {
        padding-bottom: 76px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #myCarousel.sg-updating::after,
    #myCarousel.sg-fresh .item.active img {
        animation: none;
    }

    .sg-config-bar {
        transition: none;
    }
}

/* ---- Projects page: project cards ---- */
.sg-builds-section {
    padding: 70px 0 30px;
    background: #f5f6f5;
}

.sg-builds-title {
    display: block; /* the projects page styles every h2 as inline, which ignores the margin */
    margin: 0 0 48px;
    text-align: center;
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 300;
}

.sg-builds {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 28px;
}

.sg-build {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
    color: inherit;
    text-decoration: none !important;
    transition: transform .25s var(--sg-ease), box-shadow .25s;
    animation: sg-rise .5s var(--sg-ease) both;
}

.sg-build:hover,
.sg-build:focus {
    color: inherit;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
}

.sg-build-img {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #e6e8e6;
}

.sg-build-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--sg-ease);
}

.sg-build:hover .sg-build-img img {
    transform: scale(1.04);
}

.sg-build-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 18px 20px 20px;
}

.sg-build-date {
    font-size: 13px;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #777;
}

.sg-build .sg-build-body h3 {
    display: block;
    margin: 4px 0 6px;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    color: #111;
}

.sg-build-place {
    margin-bottom: 10px;
    font-size: 14px;
    color: #555;
}

.sg-build-place .glyphicon {
    display: inline;
    font-size: 13px;
    color: var(--sg-accent);
}

.sg-build-body p {
    display: -webkit-box;
    margin: 0 0 10px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    max-height: 4.65em; /* 3 lines; the clamp alone does not limit the height inside the card */
    font-size: 15px;
    line-height: 1.55;
    color: #444;
}

.sg-build-product {
    display: -webkit-box;
    margin-bottom: 12px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    max-height: 2.9em;
    font-size: 13px;
    line-height: 1.45;
    color: #777;
}

/* Keep the product line and "more" at the bottom of every card, whatever the text length. */
.sg-build-body p + .sg-build-product,
.sg-build-body p + .sg-build-more {
    margin-top: auto;
}

.sg-build-more {
    font-size: 14px;
    font-weight: 600;
    color: var(--sg-accent);
}

.sg-builds-actions {
    padding: 40px 0 50px;
    text-align: center;
}

@media (max-width: 767px) {
    .sg-builds-section {
        padding-top: 48px;
    }

    .sg-builds-title {
        margin-bottom: 32px;
    }

    .sg-builds {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sg-build,
    .sg-build-img img {
        animation: none;
        transition: none;
        transform: none !important;
    }
}

/* ---- en-US: the older styles (custom.css, sky forms, layout <style> blocks) hard-code the green ---- */
/* Configurator selections (swatch checkmarks, radios, checkboxes) use the button colour. */
html[lang="en-US"] .labelimg > input:checked + img {
    border-color: var(--sg-primary);
}

html[lang="en-US"] .labelimg > input:checked + img + i,
html[lang="en-US"] .sky-form .radio input:checked + i,
html[lang="en-US"] .sky-form .checkbox input:checked + i,
html[lang="en-US"] .sky-form .radio input + i:after,
html[lang="en-US"] .sky-form .toggle input:checked + i,
html[lang="en-US"] .chooseproduct,
html[lang="en-US"] .switch-field input:checked + label {
    background-color: var(--sg-primary);
    border-color: var(--sg-primary);
}

html[lang="en-US"] .sky-form .button {
    background: var(--sg-primary);
}

html[lang="en-US"] a:hover,
html[lang="en-US"] .one-page-header .navbar-nav > li > a:hover {
    color: var(--sg-primary);
}

/* ---- Configurator checkmarks: fill the box, centred both ways, a little larger ---- */
.sky-form .checkbox input + i:after,
.sky-form .radio input + i:after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0; /* sky-forms.css shifts the checkbox tick by -4px/-2px */
    font: normal 15px/23px FontAwesome;
    text-align: center;
}

.sky-form .radio input + i:after {
    line-height: 24px;
    border-radius: 50%;
}

.labelimg > input:checked + img + i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 16px;
    line-height: 1;
}

/* ---- Google Maps and videos only after a click (sg-consent.js) ---- */
.sg-consent {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 240px;
    padding: 24px 16px;
    background: #eef1ee;
    color: var(--sg-text);
    text-align: center;
}

.sg-consent-inner {
    max-width: 460px;
}

.sg-consent p {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.55;
}

.sg-consent label {
    display: block;
    margin: 14px 0 6px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}

.sg-consent label input {
    margin-right: 4px;
    vertical-align: -1px;
}

.sg-consent a,
.sg-consent-revoke {
    font-size: 13px;
    color: #666;
    text-decoration: underline;
}

.sg-consent-revoke {
    display: inline-block;
    margin: 6px 0 12px;
}

.sg-embed {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 16px 0;
    background: #1d1f1d;
}

.sg-embed .sg-consent {
    position: absolute;
    inset: 0;
    min-height: 0;
    background: #1d1f1d;
    color: #eee;
}

.sg-embed .sg-consent p,
.sg-embed .sg-consent label {
    color: #e8e8e8;
}

.sg-embed .sg-consent a {
    color: #c8c8c8;
}

.sg-embed iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 480px) {
    .sg-embed {
        aspect-ratio: auto !important;
        min-height: 300px;
    }

    .sg-embed.sg-embed-loaded {
        aspect-ratio: 16 / 9 !important;
        min-height: 0;
    }
}