/* in-lite lettertype */
@font-face{ 
    font-family:'Mont';
    src:url('../fonts/Mont-Regular.woff2') format('woff2'),
        url('../fonts/Mont-Regular.woff') format('woff');
    font-weight:400;
    font-style:normal;
    font-display:auto
}
@font-face{
    font-family:'Mont';
    src:url('../fonts/Mont-Regular.woff2') format('woff2'),
        url('../fonts/Mont-Regular.woff') format('woff');
    font-weight:500;
    font-style:normal;
    font-display:auto
}
@font-face{
    font-family:'Mont';
    src:url('../fonts/Mont-SemiBold.woff2') format('woff2'),
        url('../fonts/Mont-SemiBold.woff') format('woff');
    font-weight:600;
    font-style:normal;
    font-display:auto
}
@font-face{
    font-family:'Mont';
    src:url('../fonts/Mont-Bold.woff2') format('woff2'),
        url('../fonts/Mont-Bold.woff') format('woff');
    font-weight:700;
    font-style:normal;
    font-display:auto
}

/* in-lite huisstijl kleuren */
:root {
    --inlite-blue: #86a6ca;
    --inlite-blue-dark: #7595b9;
    --inlite-light-gray: #F5F5F5;
    --inlite-gray: #6B7280;
    --inlite-success: #10B981;
    --inlite-error: #EF4444;
    --inlite-warning: #7595b9;
    --inlite-heading: #38434a;
}

/* Basis stijlen */
body {
    font-family: 'Mont', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    background-size: cover;
    background: url(../img/background.jpg) no-repeat center center;
    background-size: cover;
}

/* Overschrijf Tailwind font-sans */
:root {
    --font-sans: 'Mont', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Tailwind uitbreidingen */
.bg-inlite-blue {
    background-color: var(--inlite-blue);
}

.bg-inlite-heading {
    background-color: var(--inlite-heading);
}

/* Typografie */
h1, h2, h3, h4, h5, h6 {
    text-transform: uppercase;
    color: #38434a;
    letter-spacing: .1em;
}

#comment {
    padding: 0.5rem;
    border: 1px solid #D1D5DB;
    border-radius: 0.375rem;
}

.logos img {
    background-repeat: no-repeat;
}

.uppercase {
    letter-spacing: .1em;
}

.bg-inlite-blue-dark {
    background-color: var(--inlite-blue-dark);
}

.text-inlite-blue {
    color: var(--inlite-blue);
}

/* Form styling */
.form-select, input[type="text"], input[type="email"], input[type="tel"] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #D1D5DB;
    border-radius: 0.375rem;
}

.form-select:focus, input:focus {
    outline: none;
    border-color: var(--inlite-blue);
    box-shadow: 0 0 0 3px rgba(10, 51, 86, 0.2);
}

/* Toast notification styling */
#toast {
    transform: translateY(100%); /* Zorg ervoor dat de toast standaard verborgen is */
}

#toast.show {
    transform: translateY(0);
}

#toast.success #toast-icon {
    background-color: var(--inlite-success);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

#toast.error #toast-icon {
    background-color: var(--inlite-error);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

#toast.warning #toast-icon {
    background-color: var(--inlite-warning);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

/* Sync status indicator */
#sync-status.online {
    color: var(--inlite-success) !important;
    background-color: #e7ffda  !important;
}

#sync-status.offline {
    color: var(--inlite-warning) !important;
    background-color: #dae6ff !important;
}

#sync-status.syncing {
    background-color: #ffffff;
    color: #3B82F6;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
}

/* Responsive aanpassingen */
@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}