/* Custom Styles for Empowerment Komunah - Google Learn Inspired (Refined) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* 1. Variables & Base */
:root {
    --ek-primary-hex: #fb637c;
    --ek-secondary-hex: #f6a120;
    --ek-dark-hex: #161a1d; /* Slightly softer dark */
    --ek-light-bg: #f8f9fa; /* Subtle off-white for sections */
    --ek-gray-100: #f8f9fa;
    --ek-gray-200: #e9ecef;
    --ek-gray-300: #dee2e6;
    --ek-gray-400: #ced4da;
    --ek-gray-500: #adb5bd;
    --ek-gray-600: #6c757d; /* Muted text */
    --ek-gray-700: #495057; /* Standard text */
    --ek-gray-800: #343a40; /* Headings */
    --ek-text-light: var(--ek-gray-700);
    --ek-text-dark: #e4e6eb; /* Brighter dark text */
    --ek-border-light: rgba(0, 0, 0, 0.08); /* Subtle border light */
    --ek-border-dark: rgba(255, 255, 255, 0.1); /* Subtle border dark */

    /* --- Bootstrap Overrides --- */
    --bs-primary: var(--ek-primary-hex);
    --bs-primary-rgb: 251, 99, 124;
    --bs-secondary: var(--ek-gray-600);
    --bs-secondary-rgb: 108, 117, 125;
    --bs-warning: var(--ek-secondary-hex);
    --bs-warning-rgb: 246, 161, 32;
    --bs-light: var(--ek-light-bg); /* Map light */
    --bs-light-rgb: 248, 249, 250;
    --bs-dark: var(--ek-dark-hex); /* Map dark */
    --bs-dark-rgb: 22, 26, 29;

    /* Body */
    --bs-body-font-family: 'Inter', sans-serif;
    --bs-body-font-size: 0.95rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.6;
    --bs-body-color: var(--ek-text-light);
    --bs-body-bg: #ffffff;
    --bs-emphasis-color: var(--ek-gray-800);

    /* Borders */
    --bs-border-color: var(--ek-border-light);
    --bs-border-color-translucent: var(--ek-border-light);
    --bs-border-radius: 0.5rem; /* 8px */
    --bs-border-radius-sm: 0.375rem; /* 6px */
    --bs-border-radius-lg: 0.75rem; /* 12px */
    --bs-border-width: 1px;

    /* Links */
    --bs-link-color: var(--bs-primary);
    --bs-link-decoration: none;
    --bs-link-hover-color: darken(var(--ek-primary-hex), 10%);
    --bs-link-hover-decoration: underline;

    /* Forms */
    --bs-form-control-bg: var(--bs-body-bg);
    --bs-form-select-bg: var(--bs-body-bg);
    --bs-form-label-font-weight: 500;
    --bs-form-label-color: var(--ek-gray-700);
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

    /* Buttons */
    --bs-btn-font-weight: 500;
    --bs-btn-padding-y: 0.55rem; /* Adjusted padding */
    --bs-btn-padding-x: 1.1rem;
    --bs-btn-border-radius: var(--bs-border-radius);
    --bs-btn-box-shadow: none;
    --bs-btn-focus-box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25); /* Softer focus */
    --bs-btn-active-box-shadow: none;

    /* Cards */
    --bs-card-border-width: 0; /* Borderless cards */
    --bs-card-border-color: transparent;
    --bs-card-border-radius: var(--bs-border-radius-lg);
    --bs-card-box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Default subtle shadow */
    --bs-card-cap-bg: transparent;
    --bs-card-bg: var(--bs-body-bg);
    --bs-card-spacer-y: 1.25rem; /* More card padding */
    --bs-card-spacer-x: 1.25rem;
    --bs-card-title-color: var(--ek-gray-800);
    --bs-card-color: var(--ek-text-light);

    /* Modals */
    --bs-modal-border-color: var(--bs-border-color);
    --bs-modal-header-border-color: var(--bs-border-color);
    --bs-modal-footer-border-color: var(--bs-border-color);
    --bs-modal-border-radius: var(--bs-border-radius-lg);
    --bs-modal-box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.1); /* Slightly stronger modal shadow */
    --bs-modal-header-padding: 1rem 1.5rem; /* More modal padding */
    --bs-modal-inner-padding: 1.5rem;

    /* Pagination */
    --bs-pagination-border-radius: var(--bs-border-radius);
    --bs-pagination-focus-box-shadow: var(--bs-btn-focus-box-shadow);
    --bs-pagination-active-bg: var(--bs-primary);
    --bs-pagination-active-border-color: var(--bs-primary);
    --bs-pagination-color: var(--bs-secondary);
    --bs-pagination-hover-color: var(--bs-primary);
    --bs-pagination-disabled-color: var(--ek-gray-400);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-border-color: var(--bs-border-color);

    /* Badges */
    --bs-badge-font-size: 0.78em;
    --bs-badge-font-weight: 600;
    --bs-badge-padding-y: 0.45em;
    --bs-badge-padding-x: 0.8em;
    --bs-badge-border-radius: var(--bs-border-radius); /* Match button radius */
}

/* --- Dark Mode Variables --- */
[data-bs-theme="dark"] {
    --bs-body-color: var(--ek-text-dark);
    --bs-body-bg: var(--ek-dark-hex);
    --bs-emphasis-color: #fff;
    --bs-secondary: var(--ek-gray-500);
    --bs-tertiary-bg: #212529; /* Bootstrap dark component bg */
    --bs-light: var(--bs-tertiary-bg); /* Remap light */
    --bs-light-rgb: 33, 37, 41;
    --bs-border-color: var(--ek-border-dark);
    --bs-border-color-translucent: var(--ek-border-dark);
    --bs-link-color: var(--bs-primary);
    --bs-link-hover-color: lighten(var(--ek-primary-hex), 10%);
    --bs-card-bg: var(--bs-tertiary-bg);
    --bs-card-box-shadow: none;
    --bs-card-title-color: #fff;
    --bs-card-color: var(--ek-text-dark);
    --bs-form-control-bg: #2a303c; /* Slightly different input bg */
    --bs-form-select-bg: #2a303c;
    --bs-form-label-color: var(--ek-gray-400);
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --bs-modal-bg: var(--bs-tertiary-bg);
    --bs-pagination-color: var(--ek-gray-500);
    --bs-pagination-hover-color: var(--bs-primary);
    --bs-pagination-disabled-color: var(--ek-gray-700);
    --bs-pagination-disabled-border-color: var(--bs-border-color);
}

/* 2. Base & Typography */
body {
    transition: background-color 0.2s ease, color 0.2s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.bg-body-subtle { /* Use for sections */
    background-color: var(--ek-light-bg) !important;
}
[data-bs-theme="dark"] .bg-body-subtle {
    background-color: var(--bs-body-bg) !important; /* Dark sections match body */
}
section { /* Consistent Section Padding */
    padding-top: 4rem;
    padding-bottom: 4rem;
}
@media (min-width: 992px) {
    section { padding-top: 5rem; padding-bottom: 5rem; }
}

h1, h2, h3, h4, h5, h6 { font-weight: 600; color: var(--bs-emphasis-color); }
h1 { font-size: calc(1.375rem + 1.5vw); }
@media (min-width: 1200px) { h1 { font-size: 2.5rem; } }
h2 { font-size: calc(1.3rem + 0.6vw); }
@media (min-width: 1200px) { h2 { font-size: 1.75rem; } }

p { color: var(--ek-text-light); }
[data-bs-theme="dark"] p { color: var(--ek-text-dark); opacity: 0.9; }
p.lead { font-weight: 400; font-size: 1.05rem; color: var(--ek-gray-700); opacity: 0.9; }
[data-bs-theme="dark"] p.lead { color: var(--ek-gray-400); }
.section-subtitle { max-width: 650px; } /* Limit subtitle width */

/* 3. Navbar */
.header-main { /* Custom class for header */
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}
.bg-body-tertiary-backdrop {
    background-color: rgba(var(--bs-body-bg-rgb), 0.9); /* More opaque */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
[data-bs-theme="dark"] .bg-body-tertiary-backdrop {
    background-color: rgba(var(--bs-body-bg-rgb), 0.85);
    border-bottom-color: var(--bs-border-color-translucent);
}
/* Logo Visibility Fix */
.navbar-brand .logo-dark { display: none; }
.navbar-brand .logo-light { display: inline-block; }
[data-bs-theme="dark"] .navbar-brand .logo-dark { display: inline-block; }
[data-bs-theme="dark"] .navbar-brand .logo-light { display: none; }

.empowerment-brand-text { color: var(--bs-primary) !important; }
.nav-link { font-weight: 500; color: var(--bs-secondary); padding-top: 1rem; padding-bottom: 1rem; } /* Vertically center */
.nav-link:hover,
.nav-link.active { color: var(--bs-primary); background-color: transparent; } /* Remove potential hover bg */
#theme-toggle {
    width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-width: var(--bs-border-width);
}
#theme-toggle i { font-size: 1.1rem; }

/* 4. Hero Section */
.hero-section {
    background-color: var(--bs-body-bg); /* White hero */
    color: var(--bs-body-color);
    padding: 0 0; /* Consistent padding */
}
[data-bs-theme="dark"] .hero-section {
    background-color: var(--ek-dark-hex);
    color: var(--ek-text-dark);
}
.hero-text { font-weight: 700; line-height: 1.25; color: var(--bs-emphasis-color); }
.hero-subtitle { color: var(--ek-gray-700); }
[data-bs-theme="dark"] .hero-subtitle { color: var(--ek-gray-400); }

#hero-cta-register.btn-primary { /* Use primary for main CTA */
    padding: 0.75rem 1.75rem; font-size: 1rem;
    box-shadow: 0 4px 15px rgba(var(--bs-primary-rgb), 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#hero-cta-register.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(var(--bs-primary-rgb), 0.25); }
.hero-section .btn-outline-primary { /* Outline secondary button */
    padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 500;
    --bs-btn-hover-bg: rgba(var(--bs-primary-rgb), 0.05);
    --bs-btn-active-bg: rgba(var(--bs-primary-rgb), 0.1);
}

.workshop-card-hero { /* Hero card styling */
    background-color: var(--bs-card-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    box-shadow: var(--bs-card-box-shadow);
    color: var(--bs-card-color);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.workshop-card-hero:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0,0,0,0.06); }
[data-bs-theme="dark"] .workshop-card-hero { background-color: var(--bs-tertiary-bg); border-color: var(--bs-border-color-translucent); box-shadow: none; }
[data-bs-theme="dark"] .workshop-card-hero:hover { border-color: rgba(255,255,255,0.15); transform: translateY(-4px); }
.workshop-card-hero .card-img-top { border-bottom: none; } /* Remove border */
.workshop-card-hero .border-top { border-top-color: var(--bs-border-color) !important; }
.workshop-card-hero .badge { /* Warning badge */
    background-color: rgba(var(--bs-warning-rgb), 0.15) !important;
    color: var(--bs-warning) !important;
    font-weight: 600;
}
[data-bs-theme="dark"] .workshop-card-hero .badge { background-color: rgba(var(--bs-warning-rgb), 0.2) !important; }
.workshop-card-hero .register-button { font-weight: 500; }

/* 5. Workshop Cards Grid */
.section-alt { background-color: var(--ek-light-bg); } /* Alternate section bg */
[data-bs-theme="dark"] .section-alt { background-color: var(--ek-dark-hex); } /* Match body in dark */

.workshop-card { /* General cards */
    background-color: var(--bs-card-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    box-shadow: var(--bs-card-box-shadow);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.workshop-card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0,0,0,0.06); }
[data-bs-theme="dark"] .workshop-card { background-color: var(--bs-tertiary-bg); border-color: transparent; box-shadow: none; }
[data-bs-theme="dark"] .workshop-card:hover { transform: translateY(-5px); background-color: lighten(var(--bs-tertiary-bg), 2%); }

.workshop-card .card-img-top { height: 180px; object-fit: cover; border-bottom: none;}
.workshop-card .card-body { padding: 1.25rem; } /* Consistent padding */
.workshop-card .card-title { font-weight: 600; font-size: 1.05rem; color: var(--bs-card-title-color); }
.workshop-card .card-text { font-size: 0.875rem; color: var(--ek-gray-600); }
[data-bs-theme="dark"] .workshop-card .card-text { color: var(--ek-gray-400); }
.workshop-card .register-button { font-size: 0.85rem; padding: 0.4rem 0.9rem; font-weight: 500; }
.workshop-card .badge { /* Muted badge */
    background-color: var(--ek-gray-100); color: var(--ek-gray-700); border: none; font-weight: 500;
}
[data-bs-theme="dark"] .workshop-card .badge { background-color: rgba(255,255,255, 0.05); color: var(--ek-gray-400); }
.workshop-card .badge.badge-featured { /* Specific class if needed */
    background-color: rgba(var(--bs-primary-rgb), 0.1) !important; color: var(--bs-primary) !important;
}
[data-bs-theme="dark"] .workshop-card .badge.badge-featured { background-color: rgba(var(--bs-primary-rgb), 0.15) !important; }


/* 6. Forms */
.form-control, .form-select {
    font-size: 0.9rem; padding: 0.55rem 0.9rem; /* Adjusted padding */
    background-color: var(--bs-body-bg); border: 1px solid var(--ek-gray-300);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control:focus, .form-select:focus {
    border-color: var(--bs-primary); box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.2);
    background-color: var(--bs-body-bg);
}
.form-control-sm, .form-select-sm { font-size: 0.85rem; padding: 0.45rem 0.8rem; } /* Smaller form controls */
.form-label.small { font-size: 0.8rem; margin-bottom: 0.25rem; color: var(--bs-secondary); } /* Smaller labels */
.form-text.small { font-size: 0.75rem; }

[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select {
    background-color: var(--bs-body-bg); border: 1px solid var(--ek-border-dark); color: var(--ek-text-dark);
}
[data-bs-theme="dark"] .form-control::placeholder { color: var(--ek-gray-600); }
[data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus {
     border-color: var(--bs-primary); box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.25); background-color: var(--bs-body-bg);
}
.input-group-text { background-color: var(--ek-gray-100); border-color: var(--ek-gray-300); color: var(--ek-gray-600); }
[data-bs-theme="dark"] .input-group-text { background-color: var(--bs-tertiary-bg); border-color: var(--ek-border-dark); color: var(--ek-gray-500); }

/* 7. Benefits Section */
#beneficios { background-color: var(--bs-body-bg); } /* White background */
[data-bs-theme="dark"] #beneficios { background-color: var(--ek-dark-hex); }

.benefit-icon { width: 50px; height: 50px; font-size: 1.6rem; background-color: rgba(var(--bs-primary-rgb), 0.08); color: var(--bs-primary); display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.benefit-card { background-color: transparent; border: none; padding: 1.5rem; } /* No bg/border needed for simple style */
.benefit-card:hover { transform: none; box-shadow: none; } /* No hover effect */
.benefit-card h3 { color: var(--bs-emphasis-color); }
.benefit-card p { color: var(--ek-gray-600); }
[data-bs-theme="dark"] .benefit-card p { color: var(--ek-gray-400); }


/* 8. Footer */
.footer-main { background-color: var(--ek-dark-hex); border-top: none; padding-top: 4rem; color: var(--ek-gray-400); }
.footer-heading { font-size: 1rem; font-weight: 600; color: #fff; opacity: 0.9; }
.footer-link { color: var(--ek-gray-400) !important; font-size: 0.875rem; transition: color 0.2s ease; }
.footer-link:hover { color: var(--bs-primary) !important; }
.footer-about-text { color: var(--ek-gray-500) !important; }
.footer-contact-item { color: var(--ek-gray-400); font-size: 0.875rem; }
.footer-contact-item i { color: var(--bs-primary); font-size: 1rem; }
.footer-social-link { color: var(--ek-gray-500); transition: color 0.2s ease; }
.footer-social-link:hover { color: var(--bs-primary); }
.footer-copyright { border-top-color: rgba(255, 255, 255, 0.1) !important; color: var(--ek-gray-600) !important; }

/* 9. Modal */
.modal-content { border: none; box-shadow: var(--bs-modal-box-shadow); background-color: var(--bs-body-bg); }
[data-bs-theme="dark"] .modal-content { background-color: var(--bs-tertiary-bg); }
.modal-header { border-bottom: 1px solid var(--bs-border-color); padding: 1rem 1.5rem; }
.modal-body { padding: 1.5rem; }
.modal-footer { border-top: 1px solid var(--bs-border-color); }
#modal-workshop-name { background-color: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); }
[data-bs-theme="dark"] #modal-workshop-name { background-color: rgba(var(--bs-dark-rgb), 0.5); border-color: var(--bs-border-color-translucent); }
/* Modal feedback adjustments */
#modal-feedback { min-height: 1.5rem; padding-top: 0.25rem;}
#modal-feedback .alert { padding: 0.5rem 1rem; margin: 0; font-weight: 500; }

/* 10. Pagination */
.pagination .page-link { background-color: transparent; border: 1px solid var(--bs-border-color); color: var(--bs-secondary); margin: 0 3px; border-radius: var(--bs-border-radius); box-shadow: none; padding: 0.4rem 0.75rem; font-size: 0.85rem; }
.pagination .page-link:hover { background-color: var(--ek-gray-100); border-color: var(--ek-gray-300); color: var(--bs-primary); }
.pagination .page-item.active .page-link { background-color: var(--bs-primary); border-color: var(--bs-primary); color: #fff; box-shadow: none; }
.pagination .page-item.disabled .page-link { background-color: transparent; border-color: var(--bs-border-color); color: var(--ek-gray-400); opacity: 0.7; }
[data-bs-theme="dark"] .pagination .page-link { background-color: transparent; border-color: var(--bs-border-color-translucent); color: var(--ek-gray-500); }
[data-bs-theme="dark"] .pagination .page-link:hover { background-color: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.15); color: var(--bs-primary); }
[data-bs-theme="dark"] .pagination .page-item.disabled .page-link { background-color: transparent; border-color: var(--bs-border-color-translucent); color: var(--ek-gray-700); }
[data-bs-theme="dark"] .pagination .page-item.active .page-link { background-color: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }


/* 11. Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ek-gray-300); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ek-gray-400); }
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--ek-gray-700); }
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--ek-gray-600); }

/* 12. Utilities */
.min-h-300 { min-height: 300px; }
.line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.icon-link i { vertical-align: -0.125em; } /* Align icons better */