/*
Theme Name: Kantoorethiek
Author: Aart
Description: Custom theme for Kantoorethiek
Version: 1.0
*/

/* You can put your plain CSS down here later */
body {
    background-color: #f9f9f9;
}

/* ==========================================================================
   LEGAL PAGES & WYSIWYG CONTENT STYLES
   ========================================================================== */
.legal-content {
    color: #475569; /* text-surface-600 */
    font-size: 1.125rem; /* text-lg */
    line-height: 1.75;
}

/* Headings */
.legal-content h1,
.legal-content h2,
.legal-content h3,
.legal-content h4,
.legal-content h5,
.legal-content h6 {
    color: #0F172A; /* text-surface-900 */
    font-weight: 800;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.legal-content h2 {
    font-size: 1.875rem; /* text-3xl */
}

.legal-content h3 {
    font-size: 1.5rem; /* text-2xl */
}

/* Paragraphs */
.legal-content p {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}

/* Links */
.legal-content a {
    color: #5E8468; /* text-accent */
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color 0.2s ease-in-out;
}

.legal-content a:hover {
    color: #2E8B7F; /* text-accent-light */
}

/* Lists */
.legal-content ul,
.legal-content ol {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    padding-left: 1.625rem;
}

.legal-content ul {
    list-style-type: disc;
}

.legal-content ol {
    list-style-type: decimal;
}

.legal-content li {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Bold and Italics */
.legal-content strong,
.legal-content b {
    color: #0F172A; /* text-surface-900 */
    font-weight: 700;
}

.legal-content em,
.legal-content i {
    color: #334155; /* text-surface-700 */
}

/* Blockquotes */
.legal-content blockquote {
    border-left: 4px solid #5E8468; /* border-accent */
    padding-left: 1rem;
    font-style: italic;
    color: #334155; /* text-surface-700 */
    background-color: #F8FAFC; /* bg-surface-50 */
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   NINJA FORMS - TAILWIND OVERRIDES
   Wraps `.ninja-forms-wrapper` to ensure we only style our specific forms.
   Note: !important is used heavily here because Ninja Forms injects inline
   styles and uses high-specificity selectors that we must overpower.
   ========================================================================== */

/* Remove default padding */
.ninja-forms-wrapper .nf-form-content {
    padding: 0 !important;
}

/* -------------------------
   LABELS
------------------------- */
.ninja-forms-wrapper .nf-field-label label {
    display: block !important;
    font-size: 0.875rem !important; /* text-sm */
    font-weight: 700 !important; /* font-bold */
    color: #3f3f46 !important; /* REPLACE: text-surface-800 */
    margin-bottom: 0.375rem !important; /* mb-1.5 */
}

/* -------------------------
   INPUTS, TEXTAREAS, SELECTS
------------------------- */
.ninja-forms-wrapper .nf-field-element input:not([type="button"]):not([type="submit"]):not([type="checkbox"]),
.ninja-forms-wrapper .nf-field-element textarea,
.ninja-forms-wrapper .nf-field-element select {
    width: 100% !important;
    padding: 0.875rem 1rem !important; /* py-3.5 px-4 */
    border-radius: 0.75rem !important; /* rounded-xl */
    border: 2px solid #e4e4e7 !important; /* REPLACE: border-surface-200 */
    background-color: #fafafa !important; /* REPLACE: bg-surface-50 */
    color: #18181b !important; /* REPLACE: text-surface-900 */
    font-weight: 600 !important; /* font-semibold */
    font-family: inherit !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
    outline: none !important;
    appearance: none !important; /* Removes default browser styling on selects */
}

/* -------------------------
   FOCUS STATES
------------------------- */
.ninja-forms-wrapper .nf-field-element input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):focus,
.ninja-forms-wrapper .nf-field-element textarea:focus,
.ninja-forms-wrapper .nf-field-element select:focus {
    border-color: #0ea5e9 !important; /* REPLACE: border-accent */
    background-color: #ffffff !important; /* focus:bg-white */
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2) !important; /* REPLACE rgba: ring-accent/20 */
}

/* -------------------------
   TEXTAREA SPECIFIC
------------------------- */
.ninja-forms-wrapper .nf-field-element textarea {
    resize: none !important;
    min-height: 140px !important; /* roughly rows="5" */
}

/* -------------------------
   CHECKBOX & PRIVACY
------------------------- */
.ninja-forms-wrapper .checkbox-container {
    display: flex !important;
    align-items: flex-start !important;
}
.ninja-forms-wrapper .nf-field-element input[type="checkbox"] {
    width: 1.25rem !important; /* w-5 */
    height: 1.25rem !important; /* h-5 */
    border-radius: 0.25rem !important; /* rounded */
    border: 2px solid #d4d4d8 !important; /* border-surface-300 */
    margin-top: 0.125rem !important;
    margin-right: 0.75rem !important;
    cursor: pointer !important;
    appearance: none !important;
    background-color: transparent !important;
}
/* Custom Checkbox Checked State */
.ninja-forms-wrapper .nf-field-element input[type="checkbox"]:checked {
    background-color: #7a8e83 !important; /* REPLACE: bg-accent */
    border-color: #0ea5e9 !important; /* REPLACE: border-accent */
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
/* Privacy Label Text */
.ninja-forms-wrapper .nf-field-element input[type="checkbox"] + label {
    font-size: 0.875rem !important; /* text-sm */
    color: #3f3f46 !important; /* REPLACE: text-surface-700 */
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

/* -------------------------
   SUBMIT BUTTON
------------------------- */
.ninja-forms-wrapper .submit-container input[type="button"],
.ninja-forms-wrapper .submit-container input[type="submit"] {
    width: 100% !important;
    background-color: #7a8e83 !important; /* REPLACE: bg-accent */
    color: #ffffff !important;
    font-size: 1rem !important; /* text-base */
    font-weight: 700 !important; /* font-bold */
    border-radius: 0.75rem !important; /* rounded-xl */
    padding: 1rem 2rem !important; /* py-4 px-8 */
    border: none !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; /* shadow-lg */
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

/* Submit Button Hover */
.ninja-forms-wrapper .submit-container input[type="button"]:hover,
.ninja-forms-wrapper .submit-container input[type="submit"]:hover {
    background-color: #7a8e83 !important; /* REPLACE: bg-accent-dark */
    transform: translateY(-4px) !important; /* hover:-translate-y-1 */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important; /* Hover shadow */
}

/* Hide Ninja Forms title and required fields legend */
.nf-form-title,
.nf-form-fields-required {
    display: none !important;
}



.legal-document {
    max-width: 800px;
    margin: 0 auto;
    padding: 4rem 1rem;
    font-family: inherit; /* Inherits from your Kantoorethiek theme */
    color: #333;
    line-height: 1.7;
}

.legal-document h1 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: #111;
}

.legal-document h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: #222;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 0.5rem;
}

.legal-document p {
    margin-bottom: 1rem;
}

.legal-document ol,
.legal-document ul {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.legal-document li {
    margin-bottom: 0.75rem;
    padding-left: 0.5rem;
}

.legal-document a {
    color: #0056b3; /* Adjust to Kantoorethiek brand color if needed */
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal-document a:hover {
    color: #003d82;
    text-decoration: none;
}



.mobile-menu-panel {
    right: -100%;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-menu-panel.open { right: 0; }
.mobile-menu-overlay {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.mobile-menu-overlay.open {
    opacity: 1;
    pointer-events: auto;
}