/* ==========================================================================
   Landing page styles
   Covers the custom classes used in Components/Sections/*.razor.
   Bootstrap (bootstrap.min.css) still supplies .container, .row, .col-md-4,
   .btn / .btn-primary / .btn-outline-light / .btn-lg — do not duplicate those.
   ========================================================================== */

:root {
    --brand-primary: #2a4e4c;
    --brand-dark: #0e2320;
    --brand-accent: #4d6d6b;
    --text-muted: #5a6472;
    --surface: #f7f7f9;
    --border-color: #e2e5e9;
}

/* HTML collapses literal newline characters by default. Translation
   strings in wwwroot/data/i18n/*.json can contain "\n" for a line break
   (e.g. "Line one\nLine two") — this makes that actually render as one,
   while still collapsing repeated spaces/tabs like normal text. */
h1, h2, h3, h4, h5, h6, p {
    white-space: pre-line;
}

/* -------------------------------------------------------------------------
   Page shell (Components/Layout/MainLayout.razor)
   ------------------------------------------------------------------------- */
.page {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#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;
    }

/* -------------------------------------------------------------------------
   Nav bar (Components/Layout/NavMenu.razor)
   ------------------------------------------------------------------------- */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
}

.site-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4rem;
}

.site-nav-brand {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--brand-dark);
    text-decoration: none;
}

/* Groups the links, language switch, and hamburger on the right of the bar. */
.site-nav-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.site-nav-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.site-nav-links a:not(.btn) {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
}

.site-nav-links a:not(.btn):hover {
    color: var(--brand-primary);
}

/* Hamburger toggle — hidden on desktop, revealed at the mobile breakpoint
   near the bottom of this file, where .site-nav-links becomes a dropdown. */
.site-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.75rem;
    height: 2.5rem;
    padding: 0 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background: #fff;
    cursor: pointer;
}

.site-nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--brand-dark);
    border-radius: 1px;
}

.lang-switch {
    display: flex;
    gap: 0.25rem;
    padding: 0.2rem;
    background: var(--surface);
    border-radius: 0.375rem;
}

.lang-btn {
    border: none;
    background: transparent;
    padding: 0.3rem 0.6rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
}

.lang-btn:hover {
    color: var(--brand-primary);
}

.lang-btn.active {
    background: #fff;
    color: var(--brand-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.site-nav-logo {
    height: 2.5rem;      /* Fits nicely in the 4rem navbar */
    width: auto;
    display: block;
}


/* -------------------------------------------------------------------------
   Shared section spacing
   ------------------------------------------------------------------------- */
section {
    padding: 4rem 0;
    scroll-margin-top: 4rem; /* slightly larger than navbar height */
}

section h2 {
    margin-bottom: 1.5rem;
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   Hero (Components/Sections/Hero.razor)
   ------------------------------------------------------------------------- */
.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 5rem 1.5rem;
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-accent) 100%);
}

.hero-content {
    max-width: 720px;
}

.hero-content h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    margin-bottom: 1rem;
}

.hero-content p {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 2rem;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
   Product (Components/Sections/Product.razor)
   ------------------------------------------------------------------------- */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.feature-card {
    height: 100%;
    padding: 1.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.feature-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.feature-card h4 {
    color: var(--brand-primary);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.feature-card p {
    color: var(--text-muted);
    margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   Partners (Components/Sections/Partners.razor)
   ------------------------------------------------------------------------- */
.partner-carousel {
    /* How many logos each carousel page shows. This is the single source of
       truth for the count: the media queries below step it down by width, a
       small JS helper (wwwroot/js/partners.js) reads it and reports it to
       Partners.razor, which re-chunks the partners so a page holds exactly
       this many tiles — one row, never wrapped. */
    --partners-per-view: 5;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

@media (max-width: 991.98px) {
    .partner-carousel { --partners-per-view: 4; }
}

@media (max-width: 767.98px) {
    .partner-carousel { --partners-per-view: 3; }
}

@media (max-width: 575.98px) {
    .partner-carousel { --partners-per-view: 2; }
}

.partner-arrow {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: #fff;
    color: var(--text-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.partner-arrow:hover {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.partner-viewport {
    flex: 1;
    overflow: hidden;
    padding: 6px 0;
}

.partner-grid {
    display: grid;
    /* Exactly one row of --partners-per-view tiles — no wrapping. Each page
       from Partners.razor already holds this many logos, so the columns and
       the chunk size always match. minmax(0, 1fr) lets the tiles share the
       width evenly and shrink instead of overflowing. */
    grid-template-columns: repeat(var(--partners-per-view), minmax(0, 1fr));
    align-items: center;
    gap: 1.5rem;
    width: 100%;
}

.partner-grid.slide-next {
    animation: partner-slide-from-right 0.6s ease;
}

.partner-grid.slide-prev {
    animation: partner-slide-from-left 0.6s ease;
}

@keyframes partner-slide-from-right {
    from {
        transform: translateX(60px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes partner-slide-from-left {
    from {
        transform: translateX(-60px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center; /* center the tile within its (possibly wider) column */
    width: 100%;
    max-width: 170px;
    aspect-ratio: 1 / 1; /* stay square while width flexes with the grid track */
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background: var(--surface);
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.partner-logo:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.partner-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* -------------------------------------------------------------------------
   Footer (Components/Sections/Footer.razor)
   ------------------------------------------------------------------------- */
.footer {
    padding: 2rem 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.75);
    background: var(--brand-dark);
}

/* -------------------------------------------------------------------------
   Tablet / narrow: collapse the nav into a hamburger before the links crowd
   the bar. The language switch stays in the bar; only the section links and
   the contact button fold into the dropdown panel.
   ------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .site-nav-toggle {
        display: flex;
    }

    .site-nav-links {
        position: absolute;
        top: 100%;          /* drop just below the bar (relative to .site-nav) */
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.5rem 1.25rem 1rem;
        background: #fff;
        border-bottom: 1px solid var(--border-color);
        box-shadow: 0 10px 16px rgba(0, 0, 0, 0.06);
    }

    .site-nav-links.open {
        display: flex;
    }

    .site-nav-links a:not(.btn) {
        padding: 0.85rem 0.25rem;
        border-bottom: 1px solid var(--border-color);
    }

    .site-nav-links .btn {
        margin-top: 0.75rem;
        text-align: center;
    }

    /* Language picker folds into the dropdown here instead of the bar; keep
       it a compact pill rather than letting the column stretch it full-width. */
    .site-nav-links .lang-switch {
        align-self: flex-start;
        margin-top: 0.85rem;
    }
}

/* -------------------------------------------------------------------------
   Small screens (phones)
   ------------------------------------------------------------------------- */
@media (max-width: 640.98px) {
    section {
        padding: 3rem 0;
    }

    .hero {
        min-height: auto;
        padding: 3.5rem 1.25rem;
    }

    .hero-content p {
        font-size: 1.05rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    /* Tighten the bar so logo + language switch + hamburger fit on a phone. */
    .site-nav-right {
        gap: 0.85rem;
    }

    .site-nav-logo {
        height: 2rem;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    /* Reclaim width from the arrows/gaps so logos still fit 2-across on a
       phone instead of collapsing to a single tall column. */
    .partner-carousel {
        gap: 0.5rem;
    }

    .partner-arrow {
        width: 1.9rem;
        height: 1.9rem;
        font-size: 1.1rem;
    }

    .partner-grid {
        gap: 0.85rem;
    }
}

/* Very small phones: shrink the language switch so nothing overflows. */
@media (max-width: 380px) {
    .lang-btn {
        padding: 0.3rem 0.45rem;
    }

    .site-nav-right {
        gap: 0.6rem;
    }
}