@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #2c7a7b; /* theme green */
    border-color: #236362;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0.1rem white, 0 0.25rem #2c7a7b;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    /* keep original visual style */
    background-color: #b32121;
    background-repeat: no-repeat;
    background-position: 1rem;
    background-size: 1.8rem;
    color: white;
    padding: 1rem 1rem 1rem 3.7rem;
}

    .blazor-error-boundary::after {
        content: "An error has occurred.";
    }

/* Mobile nav overlay (covers page when menu is open) */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1090;
}

    .nav-overlay.show {
        display: block;
    }

/* Responsive navigation: mobile rules */
@media (max-width: 1199.98px) {
    /* nav hidden by default on mobile */
    .navmenu {
        display: none;
        position: absolute;
        top: 60px; /* adjust to match header height */
        left: 0;
        right: 0;
        background: #ffffff;
        padding: 1rem 1.25rem;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        z-index: 1100;
    }

        /* when toggled open */
        .navmenu.open {
            display: block;
        }

        /* stack links vertically */
        .navmenu ul {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            margin: 0;
            padding: 0.5rem 0;
            list-style: none;
            position:unset;
            box-shadow:none;
        }

            .navmenu ul li {
                margin: 0;
            }

        /*.navmenu a,
        .navmenu .nav-link {
            display: block;
            padding: 0.6rem 0.5rem;
            color: #333;
            text-decoration: none;
            border-radius: 6px;
        }*/

        .navmenu .nav-link:hover,
        .navmenu a:hover,
        .navmenu .nav-link.active {
            color: #2c7a7b;
            background: rgba(44,122,123,0.06);
        }

            .navmenu a:hover,
            .navmenu .nav-link:hover {
                background: rgba(44,122,123,0.06);
                color: #2c7a7b;
            }

        

        /* mobile toggle button styling (visible on small screens) */
        .mobile-nav-toggle {
            font-size: 1.25rem;
            color: #333;
            border: none;
            background: transparent;
            padding: 0.25rem 0.5rem;
            z-index: 1110;
        }

    /* ensure header sits above the page content */
    .header {
        z-index: 1200;
    }

    /* ensure get started button doesn't overlap menu */
    .btn-getstarted {
        z-index: 1110;
    }
}

/* Desktop: nav visible inline */
@media (min-width:1200px) {
  
  .navmenu ul {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Default desktop nav link color (neutral) */
  .navmenu .nav-link,
  .navmenu a {
    color: #222222;
    padding: 0.4rem 0.6rem;
    text-decoration: none;
    border-radius: 6px;
  }

  /* Hover and active use theme green */
  .navmenu .nav-link:hover,
  .navmenu a:hover,
  .navmenu .nav-link.active {
    color: #2c7a7b;
    background: rgba(44,122,123,0.06);
  }

  .mobile-nav-toggle {
    display: none !important;
  }

    .navmenu li:last-child a {
        padding-right: 0.6em !important;
    }
}

/* Mobile nav usability & polish overrides */
/* Remove iOS/Android tap highlight and browser focus flash on the burger button */
.mobile-nav-toggle {
 -webkit-tap-highlight-color: transparent;
 -webkit-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
.mobile-nav-toggle:focus,
.mobile-nav-toggle:active {
 outline: none !important;
 box-shadow: none !important;
 color: #333 !important; /* keep icon color stable */
 background: transparent !important;
}

/* Smooth overlay fade and pointer handling */
.nav-overlay {
 opacity:0;
 transition: opacity180ms ease-in-out;
 pointer-events: none;
}
.nav-overlay.show {
 opacity:1;
 pointer-events: auto;
}

/* Slide/fade animation for mobile nav */
.navmenu {
 transform-origin: top center;
 transition: transform200ms ease-in-out, opacity200ms ease-in-out;
 opacity:0;
 transform: translateY(-8px);
 border-bottom-left-radius:10px;
 border-bottom-right-radius:10px;
 overflow: hidden;
}
.navmenu.open {
 opacity:1;
 transform: translateY(0);
}

/* Visual polish for mobile menu */
@media (max-width:119.98px) {
 .navmenu {
 padding:0.5rem0.75rem;
 background: #ffffff;
 box-shadow:010px30px rgba(0,0,0,0.08); /* softer shadow */
 border:1px solid rgba(0,0,0,0.03);
 }

 .navmenu ul li + li {
 margin-top:0.25rem;
 padding-top:0.5rem;
 border-top:1px solid rgba(0,0,0,0.06);
 }

 .navmenu .nav-link {
 padding:0.6rem0.75rem;
 font-weight:500;
 color: #222222;
 transition: background120ms ease, color120ms ease;
 }

 .navmenu .nav-link:hover {
 background: rgba(44,122,123,0.06);
 color: #2c7a7b;
 }

 /* active NavLink style */
 .navmenu .active,
 .navmenu .nav-link.active {
 color: #2c7a7b;
 background: rgba(44,122,123,0.06);
 border-radius:6px;
 }
}

/* Make sure the open nav and overlay stack correctly */
.nav-overlay.show { z-index:1095; }
.navmenu.open { z-index:1105; }

/* Feature lists (Programmiersprachen / Frameworks und Bibliotheken) */
.features-list {
 list-style: none;
 margin:0;
 padding:0;
}

.features-list li {
 display: flex;
 align-items: center;
 gap:0.25rem;
 margin-bottom:0.4rem;
}

.features-list li i {
 color: #2c7a7b; /* theme green */
 margin-right:12px;
 font-size:1.05rem;
 flex:00 auto;
}

/* Contact page styles */
.contact-page .card {
 border-radius:12px;
 box-shadow:010px30px rgba(19,19,30,0.06);
 border:1px solid rgba(0,0,0,0.04);
}

.theme-icon {
 color: #2c7a7b; /* theme green */
 margin-right:12px;
}

.contact-details .d-flex i.theme-icon {
 margin-right:12px;
}

.contact-form .form-control {
 border-radius:8px;
 border:1px solid rgba(0,0,0,0.08);
}

.contact-form .btn-primary {
 background-color: #2c7a7b;
 border-color: darken(#2c7a7b,10%);
}

@media (max-width:767.98px) {
 .contact-page .card { margin-bottom:1rem; }
}

/* Timeline and skill list points */
.timeline-points,
.skill-points {
  list-style: none;
  margin: 0;
  padding: 0;
}

.timeline-points li,
.skill-points li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 0.5rem;
  color: #333;
  line-height: 1.35;
}

/* small rounded dot as bullet using theme color */
.timeline-points li::before,
.skill-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2c7a7b;
  box-shadow: 0 0 0 4px rgba(44,122,123,0.08);
}

/* slightly muted text for timeline items and a subtle icon accent */
.timeline-content .timeline-year {
  color: #6b6b74;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

/* make skill lists slightly smaller and compact in the sidebar */
.skill-points {
  font-size: 0.95rem;
  color: #444;
}

/* align icons inside office-details with spacing */
.office-details i {
  color: #2c7a7b;
  margin-right: 10px;
  font-size: 1.05rem;
  vertical-align: middle;
}

/* keep spacing tidy on small screens */
@media (max-width: 767.98px) {
  .timeline-points li,
  .skill-points li {
    padding-left: 18px;
  }
}

/* Contact page additional styles */
.contact-icon-large svg {
 width:220px;
 height:220px;
 color: #2c7a7b; /* theme color via currentColor */
}

.contact-page .card p.lead {
 color: #555;
}

/* small adjustments to contact details spacing */
.contact-details .d-flex i.theme-icon {
 font-size:1.25rem;
 margin-right:12px;
}


/*AboutWebsite CSS*/
.about-website .card {
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(19,19,30,0.06);
    border: 1px solid rgba(0,0,0,0.04);
}

.about-website .img-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    background: linear-gradient(180deg, rgba(44,122,123,0.06), rgba(44,122,123,0.02));
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    overflow: hidden;
}

    .about-website .img-placeholder img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* Feature list */
.about-website .feature-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .about-website .feature-list li {
        padding-left: 20px;
        position: relative;
        margin-bottom: 0.6rem;
    }

        .about-website .feature-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.55rem;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #2c7a7b;
            box-shadow: 0 0 0 6px rgba(44,122,123,0.06);
        }

/* Captions & muted text */
.about-website .caption {
    color: #6b6b74;
}

/* Small-screen adjustments */
@media (max-width: 767.98px) {
    .about-website .img-placeholder {
        aspect-ratio: 4/3;
    }

    .about-website .card {
        padding: 1rem;
    }
}