/* =====================================================================
   Nerdpool theme overlay
   Handles HTML-level utility-class inconsistencies between the Piku
   light and dark variants, plus the 3-state color-scheme toggle button.
   Spec: docs/superpowers/specs/2026-04-10-nerdpool-theme-consolidation-design.md
   ===================================================================== */

/* .style-two verification (Task 4 finding, 2026-04-10):
   style-light.css DOES contain 11 rules referencing .style-two, and
   responsive-light.css has 4 more. All are scoped to specific component
   parents (.accordion-style-two.style-two, .blog-meta-one.style-two,
   .footer-intro form.style-two). index-4.html uses .style-two only on
   <a class="btn-seven style-two"> elements, which none of those rules
   match. No neutralization needed for index-4. If later pages add
   accordions, blog-meta-one, or footer forms with .style-two, re-verify. */

/* ---------------------------------------------------------------------
   1. Mode-sensitive utility classes
   ---------------------------------------------------------------------
   Correction (2026-04-10): An earlier revision of this overlay defined
   `.color-dark { color: #fff }` for dark mode, believing the class meant
   "primary text color for the active theme". That was wrong.

   `.color-dark` in this theme literally means "force the text DARK (#000)".
   It is used in the dark HTML as an override on colored backgrounds (e.g.
   the cyan `.bg-eight` hero of index-4) where the default white text would
   be unreadable. The dark stylesheet already defines `.color-dark { color:
   #000 }` (style-dark.css line 76), which is correct. The light stylesheet
   has no rule for it because light-mode headings are already `#000` by
   default and need no override. Therefore NO overlay rules for `.color-dark`
   are needed — each active stylesheet handles it correctly on its own.
*/

/* `.dark-vr` is a class the dark variant adds to the main header for a
   subtle border/ruler effect. In forced-light mode (dark HTML classes
   loaded under the light stylesheet) we want it to match the light ruler. */

html[data-np-theme="light"] .theme-main-menu.dark-vr { border-color: rgba(0,0,0,0.1); }

/* ---------------------------------------------------------------------
   2. Theme toggle button
   ---------------------------------------------------------------------
   A round icon button that sits inside the main header. Three visual
   states indicated via data-np-state attribute. Uses Bootstrap Icons
   font glyphs (already loaded by the theme).
*/

/* The toggle button is intentionally always black in both light and dark
   mode, matching the theme's `.login-btn-three` (header Login button), which
   is also hardcoded to `color: #000; border: 1px solid #000` in both
   stylesheets. This is the theme's deliberate high-contrast design for
   header CTAs. Hover matches Login's yellow (#FFC226) accent. */

.np-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    margin-right: 12px;
    padding: 0;
    border: 2px solid #000;
    border-radius: 50%;
    background: #fff;
    color: #000;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    box-shadow: 5px 5px 0 0 #000;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.np-theme-toggle:hover,
.np-theme-toggle:focus-visible {
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0 0 #000;
    outline: none;
}

.np-theme-toggle:active {
    transform: translate(5px, 5px);
    box-shadow: 0 0 0 0 #000;
}

.np-theme-toggle > i {
    pointer-events: none;
}

.theme-main-menu .navbar-toggler {
    width: 55px;
    height: 55px;
    border: 2px solid #000;
    border-radius: 50%;
    background: #fff;
    box-shadow: 5px 5px 0 0 #000;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.theme-main-menu .navbar-toggler:hover,
.theme-main-menu .navbar-toggler:focus-visible {
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0 0 #000;
}
.theme-main-menu .navbar-toggler:active {
    transform: translate(5px, 5px);
    box-shadow: 0 0 0 0 #000;
}
.theme-main-menu .navbar-toggler::before,
.theme-main-menu .navbar-toggler::after,
.theme-main-menu .navbar-toggler span {
    background: #000;
}

/* ---------------------------------------------------------------------
   3. Fallback image swap for <img> tags with data-np-dark-src
   ---------------------------------------------------------------------
   Used for the logo carousel, where wrapping every <img> in <picture>
   would be noisier than a data-attribute + JS swap. The JS reads
   data-np-dark-src and swaps .src when a forced mode is active.
   No CSS rules needed for this; documentation only.
*/

/* ---------------------------------------------------------------------
   4. Dark-mode invert for pencil-raster illustrations without -dark variant
   ---------------------------------------------------------------------
   Some Piku pool illustrations (e.g. ils_15.svg) ship only as a raster-
   on-white SVG with no dedicated -dark.svg counterpart. In dark mode the
   black pencil strokes disappear into the dark background. `filter:
   invert(1)` flips the raster to white strokes, which is exactly the
   "weißes Bild" we want without maintaining a second asset.

   Scoped to the .np-invert-in-dark utility class so it only affects the
   illustrations that explicitly opt in — we don't want to invert every
   image in the document.

   Covers all three theme modes:
     - system dark (no forced override) -> invert
     - forced dark (data-np-theme="dark") -> invert
     - forced light over system dark -> NOT invert
     - any light mode -> NOT invert
*/

@media (prefers-color-scheme: dark) {
    html:not([data-np-theme="light"]) .np-invert-in-dark {
        filter: invert(1);
    }
}

html[data-np-theme="dark"] .np-invert-in-dark {
    filter: invert(1);
}

/* ---------------------------------------------------------------------
   5. Hero wrapper vertical rhythm
   ---------------------------------------------------------------------
   Piku's default .hero-banner-four .wrapper padding feels cramped for
   the Nerdpool content (no right-side illustration, so the hero is
   text-only). Override with more generous vertical breathing room.

   Piku defaults (for reference):
     - Desktop (>=992px):   padding: 190px 20px 90px
     - Mobile  (<992px):    padding: 150px 12px 50px  (responsive-*.css)
*/

.hero-banner-four .wrapper {
    padding: 260px 20px 160px;
}

@media (max-width: 991px) {
    .hero-banner-four .wrapper {
        padding: 140px 12px 110px;
    }
}

/* ---------------------------------------------------------------------
   6. Filter-nav tabs on bg-ten (green)
   ---------------------------------------------------------------------
   The section uses inline Bootstrap Icons instead of positioned SVGs,
   so the asymmetric left padding (75px) that reserves space for an
   absolutely-positioned icon is unnecessary. Use symmetric padding.

   In dark mode, the default filter-nav colors are light-on-dark, but
   bg-ten is a bright green (#90FFBD) — text must be dark for contrast,
   matching the light-mode filter-nav treatment.
*/

.bg-ten .filter-nav .nav-link {
    padding: 13px 40px;
    color: #000 !important;
    border: 2px solid #000;
    border-radius: 30px;
    box-shadow: 3px 3px 0 0 #000;
    background: transparent;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-radius 0.2s ease, background 0.3s ease;
}
.bg-ten .filter-nav .nav-link:hover {
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 0 #000;
}
.bg-ten .filter-nav .nav-link.active {
    background: #fff;
    color: #000 !important;
    border-color: #000;
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 0 #000;
}

.bg-ten .btn-twelve {
    color: #000 !important;
    border-bottom-color: #000 !important;
}

/* Shrink the Saeulen-tab illustrations on wider viewports so the colored
   section breathes around them. */
@media (min-width: 992px) {
    .saeulen-media {
        padding-inline: 4rem;
    }
}
@media (min-width: 1400px) {
    .saeulen-media {
        padding-inline: 7rem;
    }
}

/* ---------------------------------------------------------------------
   7. Testimonials (feedback-section-four) on neutral background
   ---------------------------------------------------------------------
   The base stylesheets hardcode #000 for blockquote text, the client-info
   dash, and slick-dot borders. On a colored bg that's fine, but when the
   section sits on a neutral (white/black) background the text must follow
   the active mode.
*/

.feedback-slider-three .slick-track {
    display: flex !important;
    align-items: stretch;
}
.feedback-slider-three .slick-initialized .slick-slide,
.feedback-slider-three .slick-slide {
    height: auto !important;
}
.feedback-slider-three .slick-slide > div {
    height: 100%;
}
.feedback-slider-three .item {
    height: 100%;
}
.feedback-block-three {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.feedback-block-three blockquote {
    font-weight: 400;
    font-style: italic;
}

/* Avatar + name footer (Bild + Name nebeneinander).
   Avatar dient als visueller Anker → "—"-Decorator vor dem Namen unterdrücken. */
.testimonial-author .client-info {
    padding-left: 0;
}
.testimonial-author .client-info::before {
    content: none;
}

.feedback-section-four .title h2 {
    font-size: 76px;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 991px) {
    .feedback-section-four .title h2 {
        font-size: 40px;
    }
}

/* System dark */
@media (prefers-color-scheme: dark) {
    html:not([data-np-theme="light"]) .feedback-block-three blockquote {
        color: #fff;
    }
    html:not([data-np-theme="light"]) .feedback-block-three .client-info {
        color: #fff;
    }
    html:not([data-np-theme="light"]) .feedback-block-three .client-info::before {
        background: #fff;
    }
    html:not([data-np-theme="light"]) .feedback-section-four .slick-dots button {
        border-color: #fff;
    }
    html:not([data-np-theme="light"]) .feedback-section-four .slick-dots .slick-active button {
        background: #fff;
    }
}

/* Forced dark */
html[data-np-theme="dark"] .feedback-block-three blockquote {
    color: #fff;
}
html[data-np-theme="dark"] .feedback-block-three .client-info {
    color: #fff;
}
html[data-np-theme="dark"] .feedback-block-three .client-info::before {
    background: #fff;
}
html[data-np-theme="dark"] .feedback-section-four .slick-dots button {
    border-color: #fff;
}
html[data-np-theme="dark"] .feedback-section-four .slick-dots .slick-active button {
    background: #fff;
}

/* ---------------------------------------------------------------------
   8. "Wie wir bauen" principle cards
   --------------------------------------------------------------------- */

#section-wie-wir-bauen .card-style-six,
#section-ventures .card-style-six {
    padding: 35px;
    border: 2px solid currentColor;
    border-radius: 30px;
    background-color: #fff;
    box-shadow: 5px 5px 0 0 #000;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#section-wie-wir-bauen .card-style-six:hover,
#section-ventures .card-style-six:hover {
    transform: translate(5px, 5px);
    box-shadow: 0 2px 0 0 #000;
}

@media (prefers-color-scheme: dark) {
    html:not([data-np-theme="light"]) #section-wie-wir-bauen .card-style-six {
        background-color: #060606;
        box-shadow: 5px 5px 0 0 #fff;
    }
    html:not([data-np-theme="light"]) #section-wie-wir-bauen .card-style-six:hover {
        box-shadow: 0 2px 0 0 #fff;
    }
    html:not([data-np-theme="light"]) #section-ventures .card-style-six {
        background-color: #060606;
        box-shadow: none;
    }
}
html[data-np-theme="dark"] #section-wie-wir-bauen .card-style-six {
    background-color: #060606;
    box-shadow: 5px 5px 0 0 #fff;
}
html[data-np-theme="dark"] #section-wie-wir-bauen .card-style-six:hover {
    box-shadow: 0 2px 0 0 #fff;
}
html[data-np-theme="dark"] #section-ventures .card-style-six {
    background-color: #060606;
    box-shadow: none;
}
#section-wie-wir-bauen .card-style-six h4,
#section-ventures .card-style-six h4,
#section-warum-wir .card-style-six h4 {
    margin: 0 0 15px;
}
#section-wie-wir-bauen .card-style-six p,
#section-ventures .card-style-six p,
#section-warum-wir .card-style-six p {
    margin: 0;
}

#section-warum-wir .card-style-six {
    padding: 35px;
    border: 2px solid currentColor;
    border-radius: 30px;
}

/* Fix: <picture> wrapper breaks max-height:100% chain on .icon img.
   display:contents removes <picture> from layout so <img> becomes a
   direct flex child of .icon and max-height resolves against it. */
.card-style-six .icon picture {
    display: contents;
}

/* On phones the cards are full-width — give illustrations more room */
@media (max-width: 767px) {
    .card-style-six .icon {
        height: 180px;
    }
}
.venture-slider .slick-track {
    display: flex !important;
    align-items: stretch;
}
.venture-slider .slick-initialized .slick-slide,
.venture-slider .slick-slide {
    height: auto !important;
}
.venture-slider .slick-slide > div {
    height: 100%;
}
.venture-slider .item {
    height: 100%;
}
#section-ventures .card-style-six {
    padding: 0;
    overflow: hidden;
    box-shadow: none;
    transition: none;
    display: flex;
    flex-direction: column;
}
#section-ventures .card-style-six:hover {
    transform: none;
    box-shadow: none;
}
/* ---------------------------------------------------------------------
   Venture badges (status pills)
   --------------------------------------------------------------------- */

.venture-badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    padding: 4px 14px;
    border: 1px solid #000;
    border-radius: 30px;
    vertical-align: middle;
    color: #000;
}
.venture-badge--beta {
    background: #90FFBD;
}
.venture-badge--pre-launch {
    background: #FFEC89;
}
.venture-badge--done {
    background: #9AFFFF;
}

/* ---------------------------------------------------------------------
   Venture slider dots — match feedback-section-four style
   --------------------------------------------------------------------- */

.venture-slider .slick-dots {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    padding: 0;
}
.venture-slider .slick-dots button {
    width: 12px;
    height: 12px;
    background: transparent;
    border: 1px solid #000;
    border-radius: 50%;
    margin: 0 3px;
    padding: 0;
}
.venture-slider .slick-dots .slick-active button {
    background: #000;
}

@media (prefers-color-scheme: dark) {
    html:not([data-np-theme="light"]) .venture-slider .slick-dots button {
        border-color: #fff;
    }
    html:not([data-np-theme="light"]) .venture-slider .slick-dots .slick-active button {
        background: #fff;
    }
}
html[data-np-theme="dark"] .venture-slider .slick-dots button {
    border-color: #fff;
}
html[data-np-theme="dark"] .venture-slider .slick-dots .slick-active button {
    background: #fff;
}

/* ---------------------------------------------------------------------
   Team photo with decorative shapes
   --------------------------------------------------------------------- */

.team-photo-wrapper {
    display: inline-block;
}
.team-photo-img {
    position: relative;
    z-index: 2;
    width: 100%;
    aspect-ratio: 1 / 1;
    filter: saturate(0);
    -webkit-mask-image: url(../images/assets/shape_team_mask.webp);
    -webkit-mask-size: contain;
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
}
.team-shape-bg {
    position: absolute;
    top: -75px;
    right: -75px;
    width: 100%;
    z-index: 1;
}
.team-shape-accent {
    position: absolute;
    top: 70px;
    left: -30px;
    width: 20%;
    z-index: 3;
}

#section-ventures .venture-text {
    display: flex;
    flex-direction: column;
    flex: 1;
}
#section-ventures .venture-text p {
    flex: 1;
}
#section-ventures .venture-img {
    width: 100%;
    display: block;
}
#section-ventures .venture-text {
    padding: 25px 30px 30px;
}

/* ---------------------------------------------------------------------
   8. "Was wir glauben" manifest icons
   --------------------------------------------------------------------- */

.block-feature-manifest .manifest-icon {
    display: block;
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
}

/* ---------------------------------------------------------------------
   9. Subpage header (impressum, datenschutz)
   ---------------------------------------------------------------------
   On the landing page the header is position:absolute (menu-overlay) and
   floats over the blue hero, so text is always white-on-blue. Subpages
   have no hero, so the header needs its own background and mode-aware
   text/button colors. Remove menu-overlay on subpages and use this class.
*/

.np-subpage-header {
    position: relative;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.np-subpage-header .gap-three {
    padding: 15px 30px;
}
.np-subpage-header.fixed {
    background: #fff !important;
}

/* Light mode — white header, black buttons */
.np-subpage-header .np-theme-toggle {
    border-color: #000;
    color: #000;
}
.np-subpage-header .btn-seven.style-two {
    background: #fff !important;
    color: #000 !important;
    border: 2px solid #000 !important;
}

/* System dark — türkis header */
@media (prefers-color-scheme: dark) {
    html:not([data-np-theme="light"]) .np-subpage-header,
    html:not([data-np-theme="light"]) .np-subpage-header.fixed {
        background: #9AFFFF !important;
        border-bottom: 2px solid #000;
    }
    html:not([data-np-theme="light"]) .np-subpage-header .np-theme-toggle {
        border-color: #000;
        color: #000;
    }
}
/* Forced dark — türkis header */
html[data-np-theme="dark"] .np-subpage-header,
html[data-np-theme="dark"] .np-subpage-header.fixed {
    background: #9AFFFF !important;
    border-bottom: 2px solid #000;
}
html[data-np-theme="dark"] .np-subpage-header .np-theme-toggle {
    border-color: #000;
    color: #000;
}

/* ---------------------------------------------------------------------
   10. Inline text links
   ---------------------------------------------------------------------
   Uses the scroll-top purple (#8A42FF) for inline anchor links within
   body content (e.g. bridge sentences between sections). Hover darkens
   slightly. Scoped to .main-page-wrapper to avoid leaking into nav/footer.
*/

/* ---------------------------------------------------------------------
   11. Button style (btn-seven.style-two) — card-inspired elevation
   ---------------------------------------------------------------------
   Mirrors the card-style-six pattern: elevated by default, pressed on
   hover, fully rounded on click/active.
*/

.btn-seven.style-two {
    background: #fff !important;
    color: #000 !important;
    border: 2px solid #000 !important;
    border-radius: 30px;
    box-shadow: 5px 5px 0 0 #000;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-radius 0.2s ease;
}
.btn-seven.style-two:hover {
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0 0 #000;
    background: #fff !important;
    color: #000 !important;
}
.btn-seven.style-two:active {
    transform: translate(5px, 5px);
    box-shadow: 0 0 0 0 #000;
    border-radius: 50px;
}
@media (max-width: 767px) {
    .btn-seven.style-two {
        line-height: 1.4;
        padding: 14px 30px;
    }
}

.np-team-bio {
    padding-left: 5rem;
    padding-right: 5rem;
}
@media (max-width: 767px) {
    .np-team-bio {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .fancy-banner-four .illustration {
        margin: -98px auto 0;
    }
    .pb-250 {
        padding-bottom: 125px;
    }
    .navbar-collapse .logo {
        margin-bottom: 16px;
    }
    .np-mobile-theme-toggle {
        position: absolute;
        bottom: 20px;
        right: 20px;
    }
    .navbar-collapse {
        border-right: 2px solid #000;
    }
}
.ctn-preloader .icon span:after {
    background: #9AFFFF;
}
.ctn-preloader .txt-loading .letters-loading {
    font-family: "Gordita", sans-serif;
}

.main-page-wrapper p a {
    color: #000;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.main-page-wrapper p a:hover {
    color: #333;
    text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
    html:not([data-np-theme="light"]) .main-page-wrapper p a {
        color: #fff;
    }
    html:not([data-np-theme="light"]) .main-page-wrapper p a:hover {
        color: #ccc;
    }
    html:not([data-np-theme="light"]) .main-page-wrapper [class*="bg-"] p a {
        color: #000;
    }
    html:not([data-np-theme="light"]) .main-page-wrapper [class*="bg-"] p a:hover {
        color: #333;
    }
}
html[data-np-theme="dark"] .main-page-wrapper p a {
    color: #fff;
}
html[data-np-theme="dark"] .main-page-wrapper p a:hover {
    color: #ccc;
}
html[data-np-theme="dark"] .main-page-wrapper [class*="bg-"] p a {
    color: #000;
}
html[data-np-theme="dark"] .main-page-wrapper [class*="bg-"] p a:hover {
    color: #333;
}

.scroll-top {
    background: #000 !important;
}