/* Datu.fi Docs Custom Stylesheet
   Palette:
   Title color: #FF6729
   Text color: #080808
   Background 1: #FFFFFF
   Background 2 (used for example in buttons): #0E253E
       background-image: url('/assets/background2.jpg');
*/
body {
    background-image: url('../assets/background.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
}
.hide-title + h1 {
    display: none;
}
/* Header customization to match datu.fi */
.md-header {
    background: #0E253E; /* Header background */
    box-shadow: 0 2px 8px rgba(26,86,219,0.04); /* Header shadow */
    min-height: 64px; /* Header height */
}
.md-header__button.md-logo img {
    height: 48px; /* Logo height */
    width: auto; /* Logo width auto */
    margin-right: 1.5rem; /* Logo right margin */
}
.md-header__title {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif; /* Title font */
    font-weight: 800; /* Title font weight */
    color: #FF6729; /* Title color */
    font-size: 1.3rem; /* Title font size */
}
.md-header__topic {
    display: flex; /* Topic flex layout */
    align-items: center; /* Topic vertical align */
}

/* Book a Demo button in header */
.md-header__option.datu-demo {
    margin-left: 2rem; /* Demo button left margin */
}
.datu-demo-btn {
    background: #0E253E; /* Demo button background */
    color: #fff !important; /* Demo button text color */
    border: none; /* Demo button border */
    border-radius: 2rem; /* Demo button border radius */
    padding: 0.5em 1.5em; /* Demo button padding */
    font-size: 1em; /* Demo button font size */
    font-weight: 600; /* Demo button font weight */
    text-decoration: none; /* Demo button text decoration */
    transition: background 0.2s; /* Demo button transition */
    margin-left: 1em; /* Demo button left margin */
    display: inline-block; /* Demo button display */
}
.datu-demo-btn:hover {
    background: #fff; /* Demo button hover background */
}

/* Responsive header logo and demo button */
@media (max-width: 800px) {
    .md-header__button.md-logo img {
        height: 36px; /* Logo height mobile */
    }
    .md-header__option.datu-demo {
        margin-left: 0.5rem; /* Demo button left margin mobile */
    }
}

/* Datu Docs custom styles for Material theme */
:root {
    --md-primary-fg-color: #0E253E;   /* Title color */
    --md-accent-fg-color: #FF6729;    /* Accent and button color */
    --md-typeset-font-family: 'Inter', 'Segoe UI', Arial, sans-serif; /* Main font family */
    --md-default-bg-color: #f6f6f600;   /* Main background */
    --md-default-fg-color: #080808;   /* Main text color */
}

.md-main {
    background: #14253c67; /* Main background */
    padding: 2rem;
    margin-right: 4rem;
    margin-left: 4rem;
    margin-top: 0rem;
}

.md-content{
    background: #ffffffa0;
    padding: 2rem;
}

.md-main__inner {
    background: #ffffffa0;
    border-radius: 1.5rem;
    margin-left: 1rem;
    margin-right: 1rem

}

/* Hero section styles */
.datu-hero {
    display: flex; /* Hero flex layout */
    flex-direction: column; /* Hero column direction */
    align-items: center; /* Hero center align */
    justify-content: center; /* Hero center justify */
    padding: 3rem 1rem 2rem 1rem; /* Hero padding */
    background: #ffffffbf; /* Hero background */
    border-radius: 1.5rem; /* Hero border radius */
    margin-bottom: 2rem; /* Hero bottom margin */
}
.datu-hero-title {
    font-size: 2.5rem; /* Hero title font size */
    font-weight: 800; /* Hero title font weight */
    color: #FF6729; /* Hero title color */
    margin-bottom: 0.5rem; /* Hero title bottom margin */
}
.datu-hero-subtitle {
    font-size: 1.3rem; /* Hero subtitle font size */
    color: #222; /* Hero subtitle color */
    margin-bottom: 1.5rem; /* Hero subtitle bottom margin */
    text-align: center; /* Center align subtitle text */
}
.datu-hero-btn {
    background: #0E253E; /* Hero button background */
    color: #fff !important; /* Hero button text color (forced white) */
    border: none; /* Hero button border */
    border-radius: 2rem; /* Hero button border radius */
    padding: 0.8em 2em; /* Hero button padding */
    font-size: 1.1em; /* Hero button font size */
    font-weight: 600; /* Hero button font weight */
    text-decoration: none; /* Hero button text decoration */
    transition: background 0.2s; /* Hero button transition */
    box-shadow: 0 2px 8px rgba(26,86,219,0.08); /* Hero button shadow */
}
.datu-hero-btn:hover {
    background: #FF6729; /* Hero button hover background */
    color: #fff !important; /* Hero button hover text color (forced white) */
}

/* Features grid styles */
.datu-features {
    display: flex; /* Features flex layout */
    flex-wrap: wrap; /* Features wrap */
    gap: 2rem; /* Features gap */
    justify-content: center; /* Features center justify */
    margin: 2rem 0; /* Features margin */
}
.datu-feature {
    background: #ffffffbf; /* Feature background */
    border-radius: 1rem; /* Feature border radius */
    box-shadow: 0 2px 8px rgba(14,37,62,0.06); /* Feature shadow */
    padding: 2rem 1.5rem; /* Feature padding */
    max-width: 320px; /* Feature max width */
    min-width: 220px; /* Feature min width */
    flex: 1 1 220px; /* Feature flex */
    text-align: center; /* Feature text align */
}
.datu-feature h3 {
    color: #FF6729; /* Feature title color */
    margin-bottom: 0.5rem; /* Feature title bottom margin */
}
.datu-feature p {
    color: #080808; /* Feature text color */
}

/* Datu Docs custom styles for Material theme - Datu.fi palette */
.md-header {
    background: #ffffffa0; /* Header background (palette) */
    box-shadow: 0 2px 8px rgba(14,37,62,0.04); /* Header shadow (palette) */
    min-height: 64px; /* Header height (palette) */
}
.md-header__button.md-logo img {
    height: 48px; /* Logo height (palette) */
    width: auto; /* Logo width auto (palette) */
    margin-right: 1.5rem; /* Logo right margin (palette) */
    
}
.md-header__title {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif; /* Title font (palette) */
    font-weight: 800; /* Title font weight (palette) */
    color: #FF6729; /* Title color (palette) */
    font-size: 1.3rem; /* Title font size (palette) */
}
.md-header__topic {
    display: flex; /* Topic flex layout (palette) */
    align-items: center; /* Topic vertical align (palette) */
}
.md-header__option.datu-demo {
    margin-left: 2rem; /* Demo button left margin (palette) */
}
.datu-demo-btn {
    background: #0E253E; /* Demo button background (palette) */
    color: #fff !important; /* Demo button text color (palette) */
    border: none; /* Demo button border (palette) */
    border-radius: 2rem; /* Demo button border radius (palette) */
    padding: 0.5em 1.5em; /* Demo button padding (palette) */
    font-size: 1em; /* Demo button font size (palette) */
    font-weight: 600; /* Demo button font weight (palette) */
    text-decoration: none; /* Demo button text decoration (palette) */
    transition: background 0.2s; /* Demo button transition (palette) */
    margin-left: 1em; /* Demo button left margin (palette) */
    display: inline-block; /* Demo button display (palette) */
}
.datu-demo-btn:hover {
    background: #FF6729; /* Demo button hover background (palette) */
    color: #fff !important; /* Demo button hover text color (palette) */
}

/* Call-to-action section styles */
.datu-cta {
    background: #0E253E; /* CTA background */
    color: #fff; /* CTA text color */
    border-radius: 1.5rem; /* CTA border radius */
    padding: 2rem 1rem; /* CTA padding */
    text-align: center; /* CTA text align */
    margin: 2rem 0; /* CTA margin */
}
.datu-cta-btn {
    background: #FF6729; /* CTA button background */
    color: #fff; /* CTA button text color */
    border: none; /* CTA button border */
    border-radius: 2rem; /* CTA button border radius */
    padding: 0.8em 2em; /* CTA button padding */
    font-size: 1.1em; /* CTA button font size */
    font-weight: 600; /* CTA button font weight */
    text-decoration: none; /* CTA button text decoration */
    margin-top: 1rem; /* CTA button top margin */
    display: inline-block; /* CTA button display */
    transition: background 0.2s; /* CTA button transition */
}
.datu-cta-btn:hover {
    background: #FF6729; /* CTA button hover background */
    color: #fff; /* CTA button hover text color */
}


/* Responsive tweaks for mobile */
@media (max-width: 800px) {
    .md-header__button.md-logo img {
        height: 36px; /* Logo height mobile */
    }
    .md-header__option.datu-demo {
        margin-left: 0.5rem; /* Demo button left margin mobile */
    }
    .datu-features {
        flex-direction: column; /* Features column layout mobile */
        align-items: center; /* Features center align mobile */
    }
    .datu-hero {
        padding: 2rem 0.5rem 1.5rem 0.5rem; /* Hero padding mobile */
    }
}