/* ------------------------------------------------------------------
   CORIC-ARCHITEKTUR — project overrides

   Loaded AFTER css/style.css. style.css is pristine vendor code from the
   BAUEN theme and must stay that way, so every project-specific rule
   lives here. Sections:

   01. White fixed navbar
   02. Logo sizing
   03. Content offset below the fixed navbar
   04. Profil CV list
   05. Contact form
   06. Leistungen timeline (3 nodes)
   07. Footer legal links
------------------------------------------------------------------- */


/* ======= 01. White fixed navbar =======
   Vendor default is a transparent bar with white links floating over the
   hero, turning white only once .nav-scroll is added by JS at scrollTop>100.
   The client asked for a permanently white bar with black lettering, and the
   logo is solid black on transparency, so it needs a light background at all
   times. Both states are pinned to the same geometry here — .nav-scroll's
   slide-in animation (top:-100px + translateY(100px)) is neutralised so the
   bar never moves. */
.navbar,
.navbar.nav-scroll {
    position: fixed;
    top: 0;
    height: 90px;
    background: #fff;
    border-bottom: 1px solid #f4f4f4;
    transform: none;
    transition: none;
}

.navbar .navbar-nav .nav-link,
.navbar .navbar-nav .nav-link.nav-color {
    color: #272727;
}

/* .active already resolves to the #b19777 accent in style.css — correct
   against white, so the current page stays gold. Only hover needs stating. */
.navbar .navbar-nav .nav-link:hover {
    color: #b19777;
}

.navbar .navbar-toggler-icon,
.navbar .navbar-toggler-icon i {
    color: #272727;
}


/* ======= 02. Logo sizing =======
   Vendor sizes the logo by width (125px), which assumed its own 3.2:1
   wordmark. Ours is 3.9:1, so size by height instead to guarantee it fits
   the 90px bar regardless of future logo swaps.

   Spacing MUST be margin, not padding: Bootstrap applies
   `*,::after,::before{box-sizing:border-box}`, so vertical padding is
   subtracted from a declared height — `height:44px; padding:23px 0` leaves
   a 0px content box and the logo disappears entirely. 44px + 2×23px = 90px. */
.logo-img {
    height: 44px;
    width: auto;
    padding: 0;
    margin: 23px 0;
}

.nav-scroll .logo-img {
    height: 44px;
    width: auto;
    padding: 0;
    margin: 23px 0;
}


/* ======= 03. Content offset below the fixed navbar =======
   The bar no longer scrolls away, so the hero and inner-page banners must
   start beneath it. The hero keeps a full viewport by subtracting the bar. */
.header {
    margin-top: 90px;
    min-height: calc(100vh - 90px);
}

.banner-header {
    margin-top: 90px;
}

@media screen and (max-width: 991px) {
    .navbar,
    .navbar.nav-scroll {
        height: 80px;
    }
    /* Vendor adds 26px (22px scrolled) of vertical padding to the wrapper on
       mobile, which would stack with the logo's own margin and overflow the
       80px bar. Horizontal padding only; the logo margin does the centring. */
    .logo-wrapper,
    .nav-scroll .logo-wrapper {
        padding: 0 0 0 15px;
    }
    .logo-img,
    .nav-scroll .logo-img {
        height: 34px;
        width: auto;
        padding: 0;
        margin: 23px 0;
    }
    .header {
        margin-top: 80px;
        min-height: calc(100vh - 80px);
    }
    .banner-header {
        margin-top: 80px;
    }
    /* The collapsed menu drops out of a fixed bar, so it needs to scroll
       independently rather than run off the bottom of short screens. */
    .navbar .navbar-collapse {
        max-height: calc(100vh - 80px);
    }
}


/* ======= 03b. Hero caption =======
   The vendor separator dot between the caption words is #272727, which is
   invisible against the dark overlay on the hero. */
.header .caption p span:after {
    background: #fff;
    opacity: .6;
}


/* ======= 04. Profil CV list =======
   .info-list is the only pre-styled year→text row in the theme, but its
   li is floated at calc(48% - 1px) for a two-column contact block. A CV
   reads as a single column. */
.team-details .content .info-list li {
    width: 100%;
    float: none;
}

.team-details .content .info-list .list-title {
    min-width: 120px;
}


/* ======= 05. Contact form =======
   Web3Forms' honeypot must be in the DOM but invisible, and must not use
   type="hidden" — bots skip those, which is the whole point. */
.hp-field {
    position: absolute;
    left: -9999px;
    opacity: 0;
    height: 0;
    width: 0;
    overflow: hidden;
}

.contact__form .form-note {
    font-size: 13px;
    color: #999;
    margin-top: 10px;
}

/* Shown only if the captcha is unsolved or its script was blocked. */
.contact__form .form-note.is-error {
    color: #b02a2a;
    font-size: 14px;
    line-height: 1.5;
}

/* hCaptcha renders an iframe; keep it from overflowing narrow columns. */
.contact__form .h-captcha {
    margin-bottom: 5px;
}

.contact__form .h-captcha iframe {
    max-width: 100%;
}


/* ======= 06. Leistungen timeline =======
   The vendor .process component ships as four col-lg-3 nodes; ours has
   three. The connector arrow is absolutely positioned at right:-40% for a
   4-up grid, which overshoots at 3-up. */
@media screen and (min-width: 992px) {
    .process .item img {
        width: 60%;
        right: -30%;
    }
}


/* ======= 07. Footer legal links ======= */
.sub-footer .legal-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sub-footer .legal-links li {
    display: inline-block;
    margin-left: 15px;
}

.sub-footer .legal-links li:first-child {
    margin-left: 0;
}

.sub-footer .legal-links a {
    color: #777;
    font-size: 14px;
    transition: color .3s;
}

.sub-footer .legal-links a:hover {
    color: #b19777;
}