/*
 * ks_style.css
 *
 * Copyright (C) Kernel Software 2026
 *
 */

/* ---------- Page frame ---------- */

/* the page uses the window width up to this limit */
:root {
    --page-max: 1600px;
}

body {
    background-image: url(../images/main_bgd.jpg);
    background-repeat: no-repeat;
    background-position: top;
    background-color: #272f32;
    padding: 0px;
    margin: 0px;
    /* words too long for a small screen are broken */
    overflow-wrap: break-word;
}

/* layout custom elements must not add boxes of their own (no margin, padding, border) */
ks-header, ks-sidemenu, ks-footer {
    display: contents;
}

/* images never wider than their column, so that pages fit small screens */
img {
    max-width: 100%;
    height: auto;
}

.main {
    max-width: var(--page-max);
    padding: 0px 8px;
    margin-left: auto;
    margin-top: 10px;
    margin-right: auto;
}

.home .main {
    margin-top: 20px;
}

#choice {
    text-align: right;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #FFFFFF;
    padding-bottom: 6px;
}

#choice a {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #888888;
    text-decoration: none;
}

#choice a:hover {
    color: #FFFFFF;
}

/* logo and menu side by side, the menu goes below the logo when there is not enough room */
#header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0px;
    margin: 0px;
    background-color: rgba(0, 0, 0, 0.23);
    border-radius: 10px;
    min-height: 78px;
}

#header_img {
    float: left;
    margin-left: 20px;
    margin-top: 15px;
    width: 180px;
}

#header_menu {
    width: 610px;
    max-width: 100%;
    margin-top: 2px;
}

/* the German and Spanish menu labels are longer */
.home #header_menu,
html[lang="de"] #header_menu,
html[lang="es"] #header_menu {
    width: 690px;
}

/* bullet above the active menu entry, placed by ks-layout.js (none for the home page) */
#puce2, #puce3, #puce4, #puce5 {
    position: relative;
    top: 14px;
    background-image: url(../images/puce.gif);
    width: 12px;
    height: 7px;
}

.home #puce1 {
    position: relative;
    top: 14px;
    left: 62px;
    width: 12px;
    height: 7px;
    clear: both;
}

/* "hamburger" menu button, only shown on phones */
#nav_toggle {
    display: none;
}

#filetH {
    background-image: url(../images/filetH.gif);
    background-repeat: repeat;
    height: 2px;
    margin-left: min(25px, 3%);
    margin-right: min(15px, 2%);
    margin-top: 15px;
}

#bottom {
    background-image: url(../images/filetH.gif);
    background-repeat: repeat;
    height: 2px;
    margin-left: min(25px, 3%);
    margin-right: min(15px, 2%);
    margin-top: 15px;
}

.home #bottom {
    margin-top: 7px;
}

.about #bottom {
    margin-top: 20px;
}

#footer {
    background-color: rgba(0, 0, 0, 0.23);
    border-radius: 10px 10px 0px 0px;
    margin-top: 20px;
    margin-bottom: 20px;
}

#rights {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-align: right;
    color: #666666;
}

/* ---------- Main menu ---------- */

/* lines high enough for the bullet to fit between them, when the menu wraps on small screens */
#nav1 {
    min-width: min(700px, 100%);
    margin-top: 7px;
    line-height: 36px;
}

#navlist {
    margin: 0px;
}

#navlist li {
    display: inline;
    list-style-type: none;
    padding-right: 10px;
}

#nav1 a {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #FFFFFF;
    text-decoration: none;
}

#nav1 a:hover {
    color: #FF9900;
}

/* ---------- Buttons ---------- */

/* Tenor Sans (SIL Open Font License, see fonts/OFL.txt), latin subset, self-hosted */
@font-face {
    font-family: "Tenor Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/TenorSans-Regular.woff2) format("woff2");
}

/* text buttons (replace the former *_btn.png images; long labels wrap on two lines) */
.ks-btn {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 221px;
    min-height: 27px;
    padding: 2px 6px 2px 31px;
    border-radius: 14px;
    background: linear-gradient(#5f6567, #42484b);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    font-family: "Tenor Sans", Arial, Helvetica, sans-serif;
    font-size: 11.5px;
    font-weight: normal;
    text-align: left;
    line-height: 1.1;
    -webkit-text-stroke: 0.25px #FFFFFF;
    text-decoration: none;
}

.ks-btn::before {
    content: "";
    flex: 0 0 23px;
    height: 23px;
    margin-left: -29px;
    margin-right: 6px;
    border-radius: 50%;
    background: #40464a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23'%3E%3Cpath d='M9 6l5.5 5.5L9 17' fill='none' stroke='%23F0AB15' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
}

.ks-btn:hover, .ks-btn.active {
    background: linear-gradient(#f0ab15, #bc8712);
}

.ks-btn:hover::before, .ks-btn.active::before {
    background-color: #3a3730;
}

/* larger variant, used by the home page buttons */
.ks-btn.large {
    font-size: 15px;
    -webkit-text-stroke: 0.35px #FFFFFF;
}

/* the French solution labels need wider buttons to fit on one line */
html[lang="fr"] ks-sidemenu[topic="solutions"] .ks-btn {
    width: 244px;
}

/* ---------- Inner pages ---------- */

#main_title {
    margin-left: min(25px, 3%);
    margin-top: 20px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: #CFCFCF;
    text-decoration: none;
    padding-top: 0px;
    padding-bottom: 0px;
}

/* text column, vertical rule and side menu, wrapping below the text when there is not enough room */
#content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-left: min(25px, 3%);
    margin-right: min(15px, 2%);
    margin-top: 2px;
}

/* the text column grows a little on large screens, lines longer than that would be hard to read */
#content_left {
    flex: 1 1 640px;
    max-width: 880px;
    min-width: 0px;
}

/* pages without side menu */
#content.no_sidemenu #content_left {
    max-width: none;
}

/* as high as the text column, at most 490px */
#filetM {
    flex: 0 0 2px;
    align-self: stretch;
    max-height: 490px;
    font-size: 0px;
    background-image: url(../images/filetV.gif);
    background-repeat: repeat-y;
    margin-top: 15px;
}

#content_right {
    flex: 0 0 250px;
    margin-left: 8px;
    margin-top: 61px;
}

#content_right .butt {
    margin-bottom: 8px;
}

#second_title {
    margin-left: 0px;
    margin-top: 0px;
}

#second_title h1 {
    font-family: Arial, Helvetica, sans-serif;
    color: #FF9900;
    font-size: 25px;
    font-weight: lighter;
    letter-spacing: 0.05em;
}

#quote {
    margin-top: 15px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-style: italic;
    color: #FF9900;
    margin-right: 10px;
}

#author {
    margin-top: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #FFFFFF;
}

#main_desc {
    margin-top: 15px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: lighter;
    font-size: 14px;
    color: #FFFFFF;
    margin-right: 10px;
}

#main_desc .special {
    position: relative;
    left: 20px;
    margin-left: 10px;
    margin-right: 15px;
}

#main_desc .special2 {
    margin-top: 15px;
    margin-right: 8px;
    margin-bottom: 15px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #FF9900;
    text-align: center;
    padding: 5px min(60px, 10%);
    font-weight: bold;
}

#main_desc .special3 {
    margin-top: 15px;
    margin-right: 8px;
    background-color: #1d2123;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #FF9900;
    text-align: left;
    padding: 5px min(60px, 10%);
    font-weight: bold;
}

#main_desc .special4 {
    margin-top: 15px;
    margin-right: 8px;
    background-color: #1d2123;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
}

/* grid of buttons, two columns when there is room for them, one otherwise */
#main_desc .btn_grid {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(max(221px, 40%), 1fr));
    gap: 32px 20px;
    padding-top: 20px;
    padding-bottom: 20px;
}

#desc_focus {
    margin-top: 15px;
    margin-right: 8px;
    background-color: #1d2123;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #FFFFFF;
    padding-left: 9px;
    padding-top: 1px;
    padding-right: 13px;
}

#desc_focus .quote {
    margin-top: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-style: italic;
    color: #FF9900;
    margin-right: 0px;
}

#desc_focus .author {
    margin-top: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #FFFFFF;
}

.Style2 {
    font-family: Calibri, sans-serif;
    font-size: 14pt;
    font-weight: bold;
}

.Style3 {
    font-family: Calibri, sans-serif;
    font-size: 14pt;
}

.Style11 {
    font-family: Arial, Helvetica, sans-serif;
    color: #FFFFFF;
}

.Style12 {
    font-size: 12px;
}

/* footnotes */
.note {
    font-size: 10px;
}

/* news pages */

#content.news {
    min-height: 400px;
}

#content.news .news_date {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.12em;
    color: #FF9900;
    margin-top: 20px;
}

#content.news #main_desc a {
    color: #FF9900;
    text-decoration: none;
}

/* ---------- Banners of the "home" and "about" pages ---------- */

/* picture, higher when its texts are laid out one below the other */
#banner {
    background-size: cover;
    min-height: 268px;
}

#intro {
    display: flex;
    flex-wrap: wrap;
}

#intro_claim {
    font-family: Arial, Helvetica, sans-serif;
    color: #FFFFFF;
}

/* ---------- Home page ---------- */

/* banner with the proportions of its picture (1398x363), higher when its texts need it (the picture
   is then cropped); the dark band at 10% of the bottom of the picture (2.6% of its width) */
.home #banner {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-sizing: border-box;
    background-image: url(../images/Kernel_intro_high_res.jpg);
    background-position: center bottom;
    aspect-ratio: 1398 / 363;
    min-height: 0px;
    margin-top: 10px;
    padding-bottom: 2.6%;
}

/* dark band across the picture, behind the title and the news */
.home #intro {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 10px 20px;
    min-height: 95px;
    padding: 10px max(min(74px, 8%), calc(50% - 395px));
    background-color: rgba(32, 36, 39, 0.8);
}

.home #intro_title {
    flex: none;
    width: 238px;
    margin-top: 27px;
}

.home #intro_claim {
    flex: 1 1 400px;
    margin-top: 42px;
}

#intro_news {
    flex: 1 1 400px;
    min-width: 0px;
    margin-top: 0px;
    font-family: Arial, Helvetica, sans-serif;
}

/* vertical line between the title and the news or the claim, on their left edge */
#intro_news, .home #intro_claim {
    position: relative;
    padding-left: 15px;
}

#intro_news::before, .home #intro_claim::before, .about #intro_claim::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    width: 2px;
    background-image: url(../images/filetV.gif);
    background-repeat: repeat-y;
}

#intro_news .news_label {
    font-size: 11px;
    letter-spacing: 0.12em;
    color: #CFCFCF;
    padding-bottom: 4px;
    border-bottom: 1px solid #666666;
}

#intro_news .news_row {
    display: flex;
    align-items: baseline;
    padding: 6px 0px;
    border-bottom: 1px solid #4a4a4a;
    text-decoration: none;
}

#intro_news .news_row:last-child {
    border-bottom: none;
}

#intro_news .news_date {
    flex: 0 0 82px;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.08em;
    color: #FF9900;
}

#intro_news .news_text {
    flex: 1 1 auto;
    min-width: 0;
}

#intro_news .news_title {
    display: block;
    font-size: 14px;
    font-weight: bold;
    color: #FFFFFF;
}

#intro_news .news_summary {
    display: block;
    font-size: 12px;
    color: #CFCFCF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#intro_news .news_row:hover .news_title {
    text-decoration: underline;
}

/* Layout of "push buttons" on the home page */
/* Ensure the space between the columns is at least 20px and at most 150px */
#pushes {
    display: flex;
    flex-wrap: wrap;
    column-gap: clamp(20px, calc((100% - 900px) / 2), 150px);
    padding-top: 20px;
}

#leftpush, #centerpush, #rightpush {
    display: flex;
    flex-direction: column;
    flex: 0 0 300px;
    min-height: 272px;
    margin-top: 23px;
}

#push_title {
    margin: 0px;
    padding: 0px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: #CFCFCF;
    text-decoration: none;
}

#pushfilet {
    background-image: url(../images/filetH.gif);
    background-repeat: repeat-x;
    height: 2px;
    width: 300px;
}

#pushphoto {
    margin: 0px;
    padding-bottom: 10px;
    padding-top: 10px;
}

#leftpush #pushphoto img,
#centerpush #pushphoto img,
#rightpush #pushphoto img {
    display: block;
    width: 300px;
    aspect-ratio: 300 / 138;
    object-fit: cover;
    box-shadow: 0 0 0 1px #888888;
}

#pushes > div:has(#pushphoto a:hover, .ks-btn:hover) #pushphoto img {
    box-shadow: 0 0 0 1px #f0ab15;
}

#pushes > div:has(#pushphoto a:hover, .ks-btn:hover) #push_title {
    color: #f0ab15;
}

#pushes > div:has(#pushphoto a:hover) .ks-btn {
    background: linear-gradient(#f0ab15, #bc8712);
}

#pushes > div:has(#pushphoto a:hover) .ks-btn::before {
    background-color: #3a3730;
}

#leftpush #pushphoto img {
    object-position: left top;
}

/* Adjust the image position to see the "Lufthansa" print on the planes */
#centerpush #pushphoto img {
    object-position: -132px center;
}

#pushdesc {
    flex: 1 0 auto;
    max-width: 300px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #FFFFFF;
    font-weight: lighter;
    padding-bottom: 10px;
}

/* ---------- About page ---------- */

#title {
    margin-left: min(25px, 3%);
    margin-top: 20px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: #CFCFCF;
}

#bio {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #FFFFFF;
    font-weight: lighter;
    margin-left: min(25px, 3%);
    margin-right: min(15px, 2%);
    margin-bottom: 25px;
}

.about #banner {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-sizing: border-box;
    background-image: url(../images/fontainebleau_canal.jpg);
    background-position: center bottom;
    aspect-ratio: 1880 / 536;
    min-height: 0px;
    max-width: 1400px;
    margin: 0px auto;
    padding-bottom: 2.85%;
}

/* dark band across the picture, behind the title and the address (same tint as on the home page) */
.about #intro {
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px 20px;
    padding: 14px min(30px, 4%) 14px min(100px, 10%);
    background-color: rgba(32, 36, 39, 0.8);
}

.about #intro_title {
    flex: 0 0 auto;
    min-width: 190px;
    max-width: 240px;
    font-family: "Tenor Sans", Arial, Helvetica, sans-serif;
    font-size: 24px;
    line-height: 1.15;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: right;
    color: #FFFFFF;
}

.about #intro_claim {
    flex: 1 1 300px;
    position: relative;
    padding-left: 15px;
    text-shadow: 0px 0px 3px #000000, 0px 0px 1px #000000;
}

.photo_credit {
    max-width: 1400px;
    margin: 4px auto 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #999999;
    text-align: right;
}

.photo_credit a {
    color: #999999;
}

/* ---------- Large screens ---------- */

@media (min-width: 1100px) {
    /* text column and side menu centered in the page */
    #content {
        justify-content: center;
    }

    .about #bio {
        max-width: 880px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 1300px) {
    #main_desc,
    #bio,
    #pushdesc {
        font-size: 15px;
    }
}

/* ---------- Phones ----------
 * Larger texts and buttons, the main menu folded behind a button,
 * and a single column (the side menu goes below the page text).
 */
@media (max-width: 700px) {
    .main {
        padding: 0px 10px;
    }

    #choice a {
        display: inline-block;
        padding: 8px 6px;
        font-size: 13px;
    }

    /* header: logo and menu button, the menu opens below them */
    #header {
        align-items: center;
    }

    #header_img {
        margin: 14px 16px;
    }

    #nav_toggle {
        display: block;
        width: 48px;
        height: 44px;
        margin-right: 14px;
        padding: 10px 11px;
        border: 1px solid #666666;
        border-radius: 6px;
        background: transparent;
        cursor: pointer;
    }

    #nav_toggle span {
        display: block;
        height: 2px;
        margin: 5px 0px;
        background: #FFFFFF;
    }

    #header #header_menu {
        display: none;
        width: 100%;
        margin: 0px;
        padding: 0px 16px 8px;
    }

    #header.nav_open #header_menu {
        display: block;
    }

    #header_menu > [id^="puce"] {
        display: none;
    }

    #nav1 {
        margin: 0px;
        line-height: normal;
    }

    #navlist {
        padding: 0px;
    }

    #navlist li {
        display: block;
        padding: 0px;
        border-top: 1px solid #3a4246;
    }

    /* vertical separators between the entries */
    #navlist li:nth-child(even) {
        display: none;
    }

    #nav1 #navlist a {
        display: block;
        padding: 14px 4px;
        font-size: 17px;
    }

    #nav1 #navlist a.active {
        color: #FF9900;
    }

    /* texts */
    #main_title {
        font-size: 22px;
    }

    #second_title h1 {
        font-size: 26px;
    }

    #main_desc,
    #bio,
    #pushdesc,
    #intro_claim,
    .Style11 {
        font-size: 17px;
        line-height: 1.45;
    }

    #quote,
    #author,
    #desc_focus,
    #main_desc .special2,
    #main_desc .special3 {
        font-size: 17px;
    }

    #main_desc h2,
    #main_desc h3 {
        font-size: 20px;
    }

    .Style12 {
        font-size: 15px;
    }

    .note {
        font-size: 14px;
    }

    #push_title {
        font-size: 22px;
    }

    #intro_news .news_date {
        font-size: 13px;
    }

    #intro_news .news_title {
        font-size: 17px;
    }

    #intro_news .news_summary {
        font-size: 15px;
        white-space: normal;
    }

    #rights {
        font-size: 13px;
    }

    /* single column: no vertical rule, the side menu below the text */
    #filetM {
        display: none;
    }

    #content_right {
        flex-basis: 100%;
        margin-left: 0px;
        margin-top: 30px;
    }

    #main_desc .special {
        left: 0px;
        margin-left: 16px;
        margin-right: 0px;
    }

    #main_desc .btn_grid {
        gap: 14px;
    }

    /* buttons as wide as the page and high enough for fingers */
    .ks-btn,
    #content_right .ks-btn {
        width: 100%;
        min-height: 46px;
        padding-left: 42px;
        border-radius: 23px;
        font-size: 16px;
    }

    .ks-btn::before {
        flex-basis: 34px;
        height: 34px;
        margin-left: -36px;
        margin-right: 10px;
        background-size: 30px;
    }

    #content_right .butt {
        margin-bottom: 12px;
    }

    .ks-btn.large {
        font-size: 18px;
    }

    #pushbtt1, #pushbtt2, #pushbtt3 {
        margin-bottom: 10px;
    }

    /* one push per line, its photo and description as wide as the page */
    #leftpush, #centerpush, #rightpush {
        flex-basis: 100%;
    }

    #leftpush #pushphoto img,
    #centerpush #pushphoto img,
    #rightpush #pushphoto img {
        width: 100%;
    }

    #pushdesc {
        max-width: none;
    }

    /* about banner: the whole picture (as wide as the page, so 28.5% of its width high), the title
       on the dark band ending at 90% of its height, then the address below it */
    .about #banner {
        aspect-ratio: auto;
        padding-top: calc(25.65% - 40px);
        padding-bottom: 0px;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: center top;
    }

    .about #intro {
        flex-direction: column;
        align-items: stretch;
        gap: 0px;
        padding: 0px;
        background: none;
    }

    .about #intro_title {
        flex: none;
        min-width: 0px;
        max-width: none;
        height: 40px;
        box-sizing: border-box;
        padding: 8px 16px;
        font-size: 20px;
        white-space: nowrap;
        text-align: left;
        background-color: rgba(32, 36, 39, 0.8);
    }

    .about #intro_claim {
        flex: none;
        margin-top: 2.85%;
        padding: 16px;
        background-color: rgba(32, 36, 39, 0.8);
    }

    .about #intro_claim::before {
        display: none;
    }

    .photo_credit {
        font-size: 12px;
    }
}

/* ---------- Narrow home banner ----------
 * As soon as the title and the news (or the claim) no longer fit side by side on the band,
 * phones and small windows alike.
 */
@media (max-width: 820px) {
    /* home banner: the left half of the picture (200% of the page width, so 51.9% of the width high),
       the title on the dark band ending at 90% of its height, then the news or the claim below it */
    .home #banner {
        min-height: 0px;
        aspect-ratio: auto;
        padding-top: calc(46.7% - 73px);
        padding-bottom: 0px;
        background-size: 200% auto;
        background-repeat: no-repeat;
        background-position: left top;
    }

    .home #intro {
        flex-direction: column;
        gap: 0px;
        min-height: 0px;
        padding: 0px;
        background: none;
    }

    .home #intro_title {
        width: auto;
        height: 73px;
        box-sizing: border-box;
        margin: 0px;
        padding: 16px;
        background-color: rgba(32, 36, 39, 0.8);
    }

    .home #intro_news,
    .home #intro_claim {
        flex: none;
        margin-top: 5.2%;
        padding: 16px;
        background-color: rgba(32, 36, 39, 0.8);
    }

    .home #intro_news::before,
    .home #intro_claim::before {
        display: none;
    }
}