/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@font-face {
    font-family: "Geist";
    src: url("assets/fonts/Geist-VariableFont_wght.ttf") format("truetype-variations");
    font-display: swap;
    font-weight: 100 900;
}

/* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
  --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
  --step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
  --step-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
  --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
  --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);
}

/* @link https://utopia.fyi/space/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
  --space-xl: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.3125rem, 0.2038rem + 0.5435vw, 0.625rem);
  --space-2xs-xs: clamp(0.5625rem, 0.4321rem + 0.6522vw, 0.9375rem);
  --space-xs-s: clamp(0.875rem, 0.7446rem + 0.6522vw, 1.25rem);
  --space-s-m: clamp(1.125rem, 0.8641rem + 1.3043vw, 1.875rem);
  --space-m-l: clamp(1.6875rem, 1.4049rem + 1.413vw, 2.5rem);
  --space-l-xl: clamp(2.25rem, 1.7283rem + 2.6087vw, 3.75rem);
  --space-xl-2xl: clamp(3.375rem, 2.8098rem + 2.8261vw, 5rem);
  --space-2xl-3xl: clamp(4.5rem, 3.4565rem + 5.2174vw, 7.5rem);

  /* Custom pairs */
  --space-s-l: clamp(1.125rem, 0.6467rem + 2.3913vw, 2.5rem);
}

:root {
  color-scheme: light dark;

  --primary: #89813d;
  --primary-content: #FFFFFF;
  --base-100: light-dark(#FFFFFF, #28230b);
  --base-200: light-dark(#EFEEE9, #141105);
  --base-300: #FAFAFA;
  --base-content: light-dark(#141105, #EFEEE9);
  --neutral: #28230b;
  --neutral-dark: #141105;
  --neutral-content: #E6E6E6;
}

[data-theme="light"] {
  color-scheme: light;
}

[data-theme="dark"] {
  color-scheme: dark;
}

html {
    height: 100%;
    background-color: var(--base-200);
    color: var(--base-content);
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: var(--step-0);
    background-color: var(--base-200);
    color: var(--base-content);
    font-family: Geist, system-ui;
}

dialog {
  z-index: 10;
}

.color-scheme-icon {
  width: var(--space-m);
  height: var(--space-m);
  opacity: .5;
}

@media (prefers-color-scheme: light) {
  .visible-light {
    display: block;
  }
  .visible-dark {
    display: none;
  }
}

@media (prefers-color-scheme: dark) {
  .visible-light {
    display: none;
  }
  .visible-dark {
    display: block;
  }
}

[data-theme="dark"] {
  .visible-light {
    display: none !important;
  }
  .visible-dark {
    display: block !important;
    opacity: 1;
  }
}

[data-theme="light"] {
  .visible-light {
    display: block !important;
    opacity: 1;
  }
  .visible-dark {
    display: none !important;
  }
}

.nav-open,
.nav-open * {
    overflow: hidden;
}

main {
    flex-grow: 1;
    margin-bottom: auto;
    margin-block-end: var(--space-m-l);
}

h1 {
    margin: 0;
    font-size: var(--step-3);    
}

h2 {
    font-size: var(--step-1);
}

h3 {
    font-size: var(--step--0);
}

.headline-margin {
    margin-bottom: var(--space-2xs);
}

img {
    max-width: 100%;
}

a:link,
a:visited {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    color: var(--primary-content);
}

figure {
    margin: 0;
}

.page-nav-toggle {
    position: absolute;
    z-index: 2;
    top: var(--space-s);
    right: var(--space-s);
    background: transparent;
    border: none;
    appearance: none;

    & svg {
        width: var(--space-l);
        height: var(--space-l);
    }
}

.page-nav-open {
    display: block;

    .nav-open & {
        display: none;
    }
}

.page-nav-close {
    display: none;

    .nav-open & {
        display: block;
    }
}

.page-nav {
    color: var(--base-content);
    background-color: var(--base-100);
    font-size: var(--step-2);
    padding: var(--space-s);

    & .page-nav_logo-type {
        font-weight: bold;
    }

    & a:link,
    & a:visited {
        color: inherit;
    }
}

.page-nav-links {
    display: none;
    padding: var(--space-s);
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    background-color: var(--base-100);
    font-weight: 600;

    .nav-open & {
      display: flex;
    }

    & .page-nav-link {
      display: block;
      padding: var(--space-xs-s) 0;
      &:not(:last-child) {
        border-bottom: 1px solid var(--primary);
      }
    }
}

.page-nav_logo-wrap {
    display: flex;
    gap: var(--space-2xs);
    align-items: center;
    margin-right: auto;
    font-size: var(--step-1);
    text-transform: uppercase;
    font-weight: 600;
}

.page-nav_logo-wrap-mobile {
  margin-block-end: var(--space-l);
}

.page-nav_logo {
    width: var(--space-m);
    background-color: var(--neutral-dark);
    padding: var(--space-3xs);
    border-radius: var(--space-l);
    border: 1px solid var(--primary);
}

@media screen AND (min-width: 40rem) {

    .keyvisual-header {
            & > *:nth-child(1) { order: 1 !important; }
            & > *:nth-child(2) { order: 2 !important; }
    }

    .page-nav-toggle {
        display: none;
    }

    .page-nav-links {
        display: contents;
    }

    .page-nav-link {
      padding: 0 !important;
      border: none !important;
    }

    .page-nav_logo-wrap-mobile {
      display: none;
    }

    .page-nav {
        position: relative;
        display: flex;
        align-items: center;
        gap: var(--space-s);
        padding: var(--space-s);
        font-size: var(--step-0);
    }
}

.page-footer {
    display: flex;
    justify-content: center;
    padding: var(--space-s);
    background-color: var(--base-100);
    color: var(--base-content);
    font-weight: 600;


    & > * {
        padding: 0 var(--space-s);
    }

    & div {
        display: flex;
        border-right: 2px solid var(--neutral-content);
        gap: var(--space-xs);
    }

    & a:link,
    & a:visited {
        color: inherit;
    }

    & a svg {
        width: 100%;
        height: var(--step-1);
        fill: var(--base-content)
    }

    & a:hover {
        color: var(--primary);
    }

    & a:hover svg {
        fill: var(--primary);
    }
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);

    & > * {
        flex-grow: 1;
    }
}

.button {
    display: flex;
    padding: var(--space-xs) !important;
    border-radius: var(--space-3xs)  !important;
    text-decoration: none;
    text-align: center;
    font-weight: 600;
    justify-content: center;
    align-items: center;
    line-height: 1;

}

.button-small {
    display: block;
    padding: var(--space-2xs) var(--space-2xs);
    border-radius: var(--space-3xs);
    text-decoration: none;
    text-align: center;
    justify-content: center;
    align-items: center;
    line-height: 1;
}

.button-primary {
    background-color: var(--primary) !important;
    color: var(--primary-content) !important;
}

.pills {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--space-3xs);
}

.pills:not(:has(.pill)) {
    display: none;
  }
  

.pill {
    font-size: var(--step--1);
    border-radius: var(--space-3xs);
    padding: var(--space-3xs) var(--space-3xs);
    font-weight: 600;
    line-height: 1;
    
    &.pill-primary {
        background: var(--base-200);
        color: var(--base-content);
    }
}

.article-list {
    margin-top: var(--space-m);
}

.article {
    margin-block-start: var(--space-m);
    background-color: var(--base-100);
    border-radius: var(--space-3xs);

    & .keyvisual {
        max-height: 50vh;
        overflow: hidden;
        display: flex;
        justify-content: center;

        & img {
            object-fit: cover;
            object-position: center center;
            border-radius: var(--space-3xs);
        }
    }
}

.author-subtitle {
    font-size: var(--step--1);

    a {
        font-weight: 600;
    }

    & span {
        font-weight: bold;
        color: var(--primary);
    }
}

.blog-year {
    font-size: var(--step-1);
    font-weight: bold;
}

.article-cards-horizontal {
    display: grid;
    gap: var(--space-s) var(--space-s);
    grid-template-columns: 1fr;
    grid-template-rows: max-content max-content max-content max-content;
}

.article-cards-vertical {
    display: grid;
    gap: var(--space-s) var(--space-m);
    grid-template-columns: 3fr 4fr;
}

.article-card {
    display: grid;
    margin-block-end: var(--space-m);
    background-color: var(--base-100);
    padding: var(--space-s);
    border-radius: var(--space-3xs);

    .article-cards-vertical & {
        grid-column: 1/-1;
        grid-template-columns: subgrid;

        .article-card_body {
            margin-bottom: auto;
        }
    }

    & figure {
        aspect-ratio: 16/9;
        display: flex;
        height: 100%;
        width: 100%;
    }

    & header {
        --clamp-line: 2;
        margin-block-start: var(--space-xs);
    }

    & img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        border-radius: var(--space-3xs);
    }

    & h1 {
        font-size: var(--step-1);
    }

    & .article-card_content {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
    }

    & .article-card_body {
        .article-cards-horizontal & {
            --clamp-line: 4;
        }
        .article-cards-vertical & {
            --clamp-line: 4;
        }
    }

    & .button-small {
        align-self: flex-start;
        justify-self: start;
    }
}


@media screen AND (min-width: 40rem) {
    .article-cards-horizontal {
        grid-template-columns: repeat(auto-fit, minmax(calc(2 * var(--space-3xl)), 1fr));
    }
    .article-card {
        margin-block-end: 0;

        & header {
            margin-block-start: 0;
            margin-block-end: 0;
        }

        .article-cards-horizontal & {
            grid-row: 1/-1;
            grid-template-rows: subgrid;

            & > div {
                grid-row: 2/-1;
                display: grid;
                grid-template-rows: subgrid;
            }
        }
    }
}

.keyvisual-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-m);
    margin: var(--space-s) 0;

    & > *:nth-child(1) { order: 1 }
    & > *:nth-child(2) { order: 2 }
    & > .img-ontop {
    order: 0;
  }
}



.keyvisual-header_figure {
    border-radius: var(--space-3xs);
    
    & img {
        border-radius: var(--space-3xs);
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.landingpage-keyvisual_overlay {
    position: absolute;
    background-image: url("assets/images/fog.jpg");
    content: '';
    background-repeat: no-repeat;
    background-size: cover;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    mix-blend-mode: screen;
    opacity: 33%;
    overflow: hidden;

}

.landingpage-keyvisual {
    display: flex;
    overflow: hidden;
    max-height: 50vh;
    min-height: 24rem;
    background-color: #000000;
    justify-content: center;

    & > * {
        display: flex;
        flex-basis: 50%;
        max-width: 60ex;
        overflow: hidden;
        aspect-ratio: 1/1;
    }
}

.landingpage-keyvisual_slideshow {
    position: relative;
}

@keyframes dissolve {
  0% { opacity: 1 }
  16.5%, 66% { opacity: 0; }
  82.5% { opacity: 1 }
}

.landingpage-keyvisual_photo {
    background-image: url("assets/images/Assault_2.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    
    &::before,
    &::after {
    position: absolute;
    width: 100%;
    height: 100%;
    }
    
    &::before {
    content: "";
    background-image: url("assets/images/Recon_1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    animation: 20s infinite dissolve;
    }

    &::after {
    content: "";
    background-image: url("assets/images/Defender_1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    animation: 20s infinite dissolve;
    animation-delay: 6s;
    }
}

.landingpage-keyvisual_logo {
    padding: var(--space-m);
    justify-content: center;
    & logo {
        object-fit: contain;
    }
}

@media (max-width: calc(40rem - 1px)) {
    .keyvisual-header_figure,
    .landingpage-keyvisual {
        display: none;
    }
    .keyvisual-header {
        grid-template-columns: 1fr;
        gap: var(--space-s);
    }

    .article-cards-horizontal {
        grid-template-rows: none;
        gap: 0;
    }

     .article-cards-vertical {
        grid-template-columns: 1fr;
        gap: 0;
    }


    .article-card {
       grid-column: 1;
    }

    .page-nav-links {
        
        & button {
            margin: var(--space-xs) 0;
        }
    }

    footer {
        font-size: var(--step--1); 
    }
}

@media (max-width: calc(48rem - 1px)) {
    .keyvisual-header {
        grid-template-columns: 1fr;
    }

    .article {
        margin: var(--space-m) !important;
        padding: var(--space-s) !important;
        & h1 {
            font-size: var(--step-1);
        }
    }
}

.team-cards {
    display: grid;
    gap: var(--space-s) var(--space-s);
    grid-template-columns: repeat(auto-fit, minmax(calc(4 * var(--space-2xl)), 1fr));
}

.team-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-s);
    background-color: var(--base-200);
    border-radius: var(--space-3xs);
    background-color: var(--base-100);
}

.team-card_header {
    border-bottom: 1px solid var(--primary);
    padding-bottom: var(--space-2xs);
}

.team-card_header_title {
    display: block;
    font-size: var(--step-2);
    font-weight: bold;
    
}

.team-card_header_subtitle {
    color: var(--primary);
    font-weight: bold;
}

.team-card_photo {
    aspect-ratio: 1/1; /* initial ratio 340/400 */
    display: flex;

    & img {
        width: 100%;
        object-fit: cover;
        object-position: top center;
        border-radius: var(--space-3xs);
    }
}

.team-card_meta {
    display: grid;
    grid-template-columns: 1fr 4fr;
    margin: 0;
    font-size: var(--step--1);

    & dd {
        margin-left: var(--space-s)
    }

    & dt {
        color: var(--primary);
        font-weight: 600;
    }
}

.clamp-line {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--clamp-line, 1);
    line-clamp: var(--clamp-line, 1);
}

.clamp-line-4 {
    --clamp-line: 4;
}

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

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

.wide,
.narrow,
.extra-narrow {
    padding-left: var(--space-m);
    padding-right: var(--space-m);
}

.wide {
    max-width: 140ex;
}

.narrow {
    max-width: 120ex;
}

.extra-narrow {
    max-width: 90ex;
    padding-top: var(--space-m);
    padding-bottom: var(--space-m);
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.subtitle {
    color: var(--primary);
    font-weight: 600;
    font-size: var(--step-0);
}

.stack > * + * {
    --flow-space: var(--space-m);
    margin-block-start: var(--flow-space) !important;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.contact-form_input {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--space-3xs);

    & label {
        font-size: var(--step--1);
        font-weight: 600;
        color: var(--primary);
    }

    & input {
        border: none;
        border-radius: var(--space-3xs);
        padding: var(--space-2xs) var(--space-2xs);
        background-color: var(--base-100);
        font-size: var(--step-0);
    }

    & textarea {
        border: none;
        border-radius: var(--space-3xs);
        padding: var(--space-2xs) var(--space-2xs);
        background-color: var(--base-100);
        font-size: var(--step-0);
    } 
}

.force-show {
    display: block;
}