/* ==========================================================================
   Kohtas site layer — loaded after theme.css and custom.css on every page.
   Scope: shared fixes for layout stability, mobile usability, accessibility
   and editorial hierarchy. Keep page-specific rules in the page itself.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Layout stability: no horizontal scroll
   -------------------------------------------------------------------------- */

/* theme.css gives .list-inline both `min-width:100%` (≤767px) and
   `margin-right:1.857em` (:not(:last-child)) → footer social list is 100% + 26px
   wide and the page scrolls sideways on every phone. */
@media all and (max-width: 767px) {
    footer .list-inline,
    footer .social-list {
        margin-right: 0;
        min-width: 0;
        max-width: 100%;
    }
    footer .bar__module.block {
        display: block;
        width: 100%;
    }
    footer .bar__module.block .btn {
        display: block;
        width: 100%;
    }
}

/* Closed dropdown panels are opacity:0 but still laid out as a full-width
   .container with negative-margin .row → 24px overflow on tablets. */
.dropdown .dropdown__container {
    visibility: hidden;
}
.dropdown.dropdown--active > .dropdown__container,
body.dropdowns--hover .dropdown:not(.dropdown--click):hover > .dropdown__container {
    visibility: visible;
}
/* 768–990px: the absolute panel is as wide as the viewport; clip it to the
   bar instead of letting it extend the document. */
@media all and (min-width: 768px) and (max-width: 990px) {
    .nav-container .bar {
        overflow-x: clip;
    }
    .dropdown .dropdown__container {
        left: 0 !important;
        right: 0;
        width: 100%;
    }
    .dropdown .dropdown__container > .container {
        max-width: 100%;
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* Wide data tables scroll inside their own box instead of the page. */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.85714286em;
}
.table-scroll > table {
    margin-bottom: 0;
    min-width: 560px;
}

/* Mobile nav bar: logo column is narrower than the logo image. */
@media all and (max-width: 767px) {
    .bar.visible-xs .col-3 {
        flex: 0 0 auto;
        max-width: none;
        width: auto;
    }
    .bar.visible-xs .col-9 {
        flex: 1 1 auto;
        max-width: none;
        width: auto;
    }
    .bar.visible-xs .row {
        align-items: center;
    }
}

/* --------------------------------------------------------------------------
   2. Readability on phones
   -------------------------------------------------------------------------- */

/* theme.css drops the root size to 13px below 768px. 14px body copy on a
   phone is the minimum for 2–3 paragraph editorial sections. */
@media all and (max-width: 768px) {
    html {
        font-size: 87.5%;
    }
    body {
        line-height: 1.7;
    }
    p,
    .lead {
        max-width: 38em;
        margin-left: auto;
        margin-right: auto;
    }
    .lead {
        font-size: 1.2142857em;
        line-height: 1.55;
    }
    /* Section rhythm: the theme pads with <br> hacks; give sections one
       consistent breathing space instead of the desktop 7.4em. */
    section:not(.imagebg):not(.cta-4):not(.space--xxs):not(.space--xs):not(.space--sm):not(.kstack) {
        padding-top: 3.5em;
        padding-bottom: 3.5em;
    }
}

/* Headings over photos: a local scrim keeps white type legible where the
   image is bright (forest hero, globe lines) without darkening the whole
   picture. */
.imagebg:not(.image--light) h1,
.imagebg:not(.image--light) .h1,
.imagebg:not(.image--light) .typed-headline .h1 {
    text-shadow: 0 2px 24px rgba(16, 22, 27, 0.55), 0 1px 2px rgba(16, 22, 27, 0.6);
}
.imagebg:not(.image--light) .lead {
    text-shadow: 0 1px 12px rgba(16, 22, 27, 0.7), 0 1px 1px rgba(16, 22, 27, 0.6);
}

/* Top scrim behind the transparent nav so the logo and menu read on bright
   hero photography. Sits above the overlay, below the content container. */
.main-container > section#top.imagebg {
    position: relative;
}
.main-container > section#top.imagebg::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 11em;
    background: linear-gradient(to bottom, rgba(16, 22, 27, 0.78) 0%, rgba(16, 22, 27, 0.35) 55%, rgba(16, 22, 27, 0) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Lead paragraphs in the brand-dark sections: measure and tone */
.bg--kohtas-dark .lead {
    color: rgba(255, 255, 255, 0.86);
}
.bg--kohtas-dark p:not(.lead):not(.type--fine-print) {
    color: rgba(255, 255, 255, 0.78);
}

/* Fine print on dark: the theme leaves it at #666 on #10161b (fails contrast). */
.bg--dark .type--fine-print,
.bg--kohtas-dark .type--fine-print,
footer.bg--dark .type--fine-print {
    color: rgba(255, 255, 255, 0.62);
}
footer.bg--dark a.type--fine-print {
    color: #cc9c71;
}

/* --------------------------------------------------------------------------
   3. Interaction: touch targets, focus, hover
   -------------------------------------------------------------------------- */

/* Mobile menu items: 12px at 50% opacity, 25px tall. Make them readable and
   tappable (≥44px rows) without redesigning the bar. */
@media all and (max-width: 767px) {
    .bar-1 .menu-horizontal > li {
        display: block;
        margin: 0;
    }
    .bar-1 .menu-horizontal > li > a,
    .bar-1 .menu-horizontal > li > .dropdown__trigger {
        display: block;
        padding: 0.8em 0;
        font-size: 1em;
        line-height: 1.6;
        letter-spacing: 0.06em;
        opacity: 1 !important;
        color: #10161b;
    }
    .bar-1 .menu-horizontal .menu-vertical a {
        display: block;
        padding: 0.5em 0;
        font-size: 1em;
    }
    .bar-1 .bar__module:not(:first-child) {
        margin-top: 0.75em;
        margin-bottom: 0.5em;
    }
    .bar-1 .bar__module .btn {
        display: block;
        width: 100%;
    }
    .hamburger-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        margin: -8px -8px -8px 0;
    }
}

/* Buttons: minimum 44px tap height on touch screens; full width on phones
   where several CTAs stack. */
@media all and (max-width: 767px) {
    .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: normal;
        line-height: 1.3;
        padding-top: 0.6em;
        padding-bottom: 0.6em;
    }
    .btn + .btn {
        margin-top: 0.75em;
        margin-left: 0;
    }
    .cta-stack .btn,
    .text-center .btn.btn--block-xs {
        width: 100%;
    }
}

/* theme.css removes outlines everywhere. Restore a visible, brand-coloured
   focus ring for keyboard users only. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #cc9c71 !important;
    outline-offset: 3px;
    border-radius: 4px;
}
.btn:focus-visible {
    outline-offset: 2px;
}

/* Dropdown trigger is a <span>; it is made focusable in markup (tabindex/role). */
.dropdown__trigger {
    cursor: pointer;
}

/* Skip link for keyboard/screen-reader users (markup: <a class="skip-link" href="#main">) */
.skip-link {
    position: absolute;
    left: 1em;
    top: -4em;
    z-index: 2000;
    padding: 0.5em 1em;
    background: #10161b;
    color: #fff;
    border-radius: 6px;
    transition: top 0.15s ease;
}
.skip-link:focus {
    top: 1em;
    color: #fff;
}

/* --------------------------------------------------------------------------
   4. Editorial components
   -------------------------------------------------------------------------- */

/* Hero CTA group: primary + secondary + text link, same on every hero. */
.cta-stack {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75em 1em;
    margin-top: 0.5em;
}
.cta-stack .btn {
    margin: 0;
}
.cta-stack .cta-stack__note {
    flex-basis: 100%;
    margin: 0.25em 0 0;
    font-size: 0.92857143em;
    color: rgba(255, 255, 255, 0.8);
}
.cta-stack .cta-stack__note a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}
.cta-stack .cta-stack__note a:hover {
    color: #cc9c71;
}
@media all and (max-width: 767px) {
    .cta-stack {
        flex-direction: column;
        align-items: stretch;
    }
    .cta-stack .btn,
    .cta-stack .btn.btn--sm + .btn--sm {
        width: 100%;
        margin: 0;
    }
}

/* Primary (gold) button, usable in any hero or dark section. */
.btn.btn--kohtas {
    background: #cc9c71;
    border-color: #cc9c71;
}
.btn.btn--kohtas .btn__text {
    color: #10161b;
}
.btn.btn--kohtas:hover {
    background: #d9ad85;
    border-color: #d9ad85;
}
.imagebg:not(.image--light) .btn.btn--kohtas,
.bg--dark .btn.btn--kohtas {
    border-color: #cc9c71;
}

/* Section eyebrow: small caps label above an h2 (replaces one-line
   "heading only" sections that used to sit alone in their own <section>). */
.eyebrow {
    display: block;
    margin-bottom: 0.8em;
    font-size: 0.78571429em;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #cc9c71;
}

/* Collapsible long reference lists (industries served, etc.). */
details.disclosure {
    margin: 0 auto;
    max-width: 48em;
    text-align: left;
}
details.disclosure summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.92857143em;
    padding: 0.4em 0;
}
details.disclosure summary::-webkit-details-marker {
    display: none;
}
details.disclosure summary::before {
    content: '+';
    display: inline-block;
    width: 1.2em;
    text-align: center;
    color: #cc9c71;
}
details.disclosure[open] summary::before {
    content: '–';
}
details.disclosure p {
    margin-top: 0.75em;
}

/* Feature cards on the front page: the theme pins the button to the card
   bottom with position:absolute; keep that, just give phones a tidier gap. */
@media all and (max-width: 767px) {
    .feature-4.boxed {
        margin-bottom: 1.25em;
    }
    .feature-4 p {
        min-height: 0;
    }
}

/* Embedded players should fill their column. */
iframe[src*="soundcloud"] {
    width: 100%;
    max-width: 100%;
}

/* Lists marked as capabilities inside cards (replaces <li> inside <p>). */
.card ul.card-list {
    text-align: left;
    padding-left: 1.2em;
    list-style: disc;
    margin-bottom: 0;
}
.card ul.card-list li {
    margin-bottom: 0.6em;
}

/* --------------------------------------------------------------------------
   5. Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   6. Page-level refinements that recur across pages
   -------------------------------------------------------------------------- */

/* Heroes on phones: the theme collapses vh heights to padding:5em; give the
   headline room below the fixed bar and keep the group vertically balanced. */
@media all and (max-width: 767px) {
    .main-container > section#top.imagebg {
        padding-top: 4.5em;
        padding-bottom: 4em;
        min-height: 78vh;
        display: flex;
        align-items: center;
    }
    .main-container > section#top.imagebg > .container {
        width: 100%;
    }
    .main-container > section#top.imagebg h1 {
        margin-bottom: 0.5em;
    }
}

/* Prose lists in long-form sections: show markers. */
ul.bullets-brand {
    list-style: disc;
    padding-left: 1.3em;
}
ul.bullets-brand li {
    margin-bottom: 0.5em;
}

/* Centre the disclosure summary in centred sections. */
.text-center details.disclosure {
    text-align: center;
}
.text-center details.disclosure p {
    text-align: left;
}

/* Mobile submenu items were dimmed to 75% and grey. */
@media all and (max-width: 767px) {
    .bar-1 .menu-vertical li:not(:hover):not(.dropdown--active),
    .bar-1 .menu-vertical li {
        opacity: 1;
    }
    .bar-1 .dropdown .dropdown__content:not([class='bg--dark']) .menu-vertical li a {
        color: #10161b;
        opacity: 1;
    }
}

/* --------------------------------------------------------------------------
   7. Contrast fixes flagged by axe (WCAG AA)
   -------------------------------------------------------------------------- */
footer.bg--dark .type--fine-print,
footer.bg--dark span.type--fine-print {
    font-size: 0.85714286em;
}
footer.bg--dark a.type--fine-print,
footer.bg--dark a.type--fine-print:not(:hover) {
    color: #cc9c71;
    opacity: 1;
}
footer.bg--dark a.type--fine-print:hover {
    color: #fff;
}
footer.bg--dark .list-inline:not(.social-list) li a,
footer.bg--dark .social-list li a {
    opacity: 0.85;
}
footer.bg--dark .list-inline li a:hover {
    opacity: 1;
}
/* Gold pricing/sales button: dark text on gold meets AA (white on #a2774f does not). */
.btn.btn-kohtas-primary-dark {
    background: #cc9c71;
    border-color: #cc9c71;
}
.btn.btn-kohtas-primary-dark .btn__text {
    color: #10161b;
}
.btn.btn-kohtas-primary-dark:hover {
    background: #d9ad85;
    border-color: #d9ad85;
}

/* --------------------------------------------------------------------------
   8. Embeds and desktop breathing room (4.10. round 3)
   -------------------------------------------------------------------------- */
/* SoundCloud players on the EUDR pages: 75 % of the column, centred. */
.podcast-embed {
    display: block;
    width: 50%;
    max-width: 100%;
    margin: 0 auto;
}
@media all and (max-width: 767px) {
    .podcast-embed {
        width: 100%;
    }
}

/* Featured video on Videos & Pods: full-width 16:9 frame. */
.video-frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #000;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 1.5em;
}
.video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.featured-video .feature__body > span {
    display: block;
}
.featured-video h3 {
    margin-bottom: 0.4em;
}

/* Contact page: air between bar, h1, lead and the form; narrower form. */
@media all and (min-width: 768px) {
    .contact-hero,
    .page-intro {
        padding-top: 12em;
        padding-bottom: 8em;
    }
    .page-intro h1 {
        margin-bottom: 0.6em;
    }
    .page-intro .lead {
        margin-bottom: 3em;
    }
    .page-intro hr {
        margin: 0 0 3.5em;
    }
    .featured-video {
        margin: 2.5em 0 1.5em;
    }
    .contact-hero h1 {
        margin-bottom: 0.6em;
    }
    .contact-hero .lead {
        margin-bottom: 3.5em;
    }
    .contact-form {
        max-width: 34em;
        margin: 0 auto;
    }
    .presence-heading {
        margin-bottom: 3em;
    }
    .presence-heading h2 {
        margin-bottom: 0;
    }
    /* Section headings site-wide: more distance from whatever precedes them. */
    section .cta > h1,
    section .cta > h2,
    section .heading-block > h2 {
        margin-bottom: 0.75em;
    }
    section .cta > h2 + .lead,
    section h2 + .lead {
        margin-top: 0.5em;
    }
}

/* --------------------------------------------------------------------------
   9. Founders section (company page)
   -------------------------------------------------------------------------- */
section.bg--dark + section.bg--dark.founders,
.founders { padding-top: 11em; padding-bottom: 6em; }
.founders .eyebrow,
.bg--dark .founders .eyebrow { margin-bottom: 1em; color: #cc9c71; }
.founders .lead { margin-bottom: 3.5em; }
.founders__row { justify-content: center; }
.founder { padding: 2.6em 2.2em 2.4em; text-align: center; max-width: 25em; margin: 0 auto 30px; height: calc(100% - 30px); }
.founder__portrait { width: 6.5em; height: 6.5em; border-radius: 50%; margin: 0 auto 1.1em; overflow: hidden; border: 1px solid rgba(206, 174, 135, 0.45); background: #1c242b; display: block; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.founder__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.founder__name { margin-bottom: 0.1em; color: #fff; font-size: 1.35714286em; line-height: 1.3; }
.founder__title { color: #cc9c71; font-size: 0.78571429em; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1em; }
.founder__bio { color: rgba(255, 255, 255, 0.78); margin-bottom: 1.2em; text-align: left; font-size: 0.92857143em; line-height: 1.7; }
.founder__link { color: #fff; font-size: 0.85714286em; display: inline-flex; align-items: center; gap: 0.5em; border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding-bottom: 2px; }
.founder__link:hover { color: #cc9c71; border-color: #cc9c71; }
@media all and (max-width: 767px) {
    .founders { padding-top: 3.5em; padding-bottom: 2em; }
    .founder { height: auto; }
}

/* Company page: "Let's talk" closing section uses normal section spacing (the theme
   zeroes padding between adjacent dark sections; the old markup compensated with <br>s). */
section.bg--dark + section.bg--dark.lets-talk,
.lets-talk { padding-top: 6em; padding-bottom: 7em; }
.lets-talk .cta h1 { margin-bottom: 0.4em; }
.lets-talk .cta .lead { margin-bottom: 2em; }