diff --git a/css/styles.css b/css/styles.css
index eb86dc0..09a1b77 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -725,3 +725,41 @@ site-content {
color: var(--color-text);
line-height: var(--line-height-normal);
}
+
+/* ==========================================================================
+ Footer Styles (Light DOM content for slotted elements)
+ ========================================================================== */
+
+.accordion-links {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-sm, 0.5rem);
+}
+
+.accordion-links a {
+ color: var(--color-text-inverse, #ffffff);
+ text-decoration: none;
+ font-size: var(--font-size-sm, 0.875rem);
+ transition: opacity var(--transition-fast, 150ms ease);
+}
+
+.accordion-links a:hover {
+ opacity: 0.8;
+}
+
+.footer-bottom-links {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-md, 1rem);
+}
+
+.footer-bottom-links a {
+ color: var(--color-text-inverse, #ffffff);
+ text-decoration: underline;
+ font-size: var(--font-size-sm, 0.875rem);
+ transition: opacity var(--transition-fast, 150ms ease);
+}
+
+.footer-bottom-links a:hover {
+ opacity: 0.8;
+}
diff --git a/index.html b/index.html
index 5ee83b2..df7364e 100644
--- a/index.html
+++ b/index.html
@@ -256,7 +256,54 @@
-
+
+ MILINDA uitgevers
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/js/app.js b/js/app.js
index 331f601..c7de25e 100644
--- a/js/app.js
+++ b/js/app.js
@@ -10,6 +10,7 @@ import "./components/horizontal-scroll-nav.js";
import "./components/search-bar.js";
import "./components/site-content.js";
import "./components/site-footer.js";
+import "./components/footer-accordion-item.js";
import "./components/book-card.js";
import "./components/push-box.js";
import "./components/arrow-button.js";
diff --git a/js/components/footer-accordion-item.js b/js/components/footer-accordion-item.js
new file mode 100644
index 0000000..dbf4da3
--- /dev/null
+++ b/js/components/footer-accordion-item.js
@@ -0,0 +1,115 @@
+/**
+ * Footer Accordion Item Component
+ * Expandable accordion item for footer navigation
+ */
+class FooterAccordionItem extends HTMLElement {
+ constructor() {
+ super();
+ this.attachShadow({ mode: "open" });
+ this._expanded = false;
+ }
+
+ static get observedAttributes() {
+ return ["title"];
+ }
+
+ connectedCallback() {
+ this.render();
+ this.setupEventListeners();
+ }
+
+ attributeChangedCallback() {
+ this.render();
+ this.setupEventListeners();
+ }
+
+ setupEventListeners() {
+ const header = this.shadowRoot.querySelector(".accordion-header");
+ if (header) {
+ header.addEventListener("click", () => this.toggle());
+ }
+ }
+
+ toggle() {
+ this._expanded = !this._expanded;
+ const content = this.shadowRoot.querySelector(".accordion-content");
+ const icon = this.shadowRoot.querySelector(".accordion-icon");
+
+ if (content) {
+ content.classList.toggle("expanded", this._expanded);
+ }
+ if (icon) {
+ icon.classList.toggle("rotated", this._expanded);
+ }
+ }
+
+ render() {
+ const title = this.getAttribute("title") || "";
+
+ this.shadowRoot.innerHTML = `
+
+
+
+
+
+ `;
+ }
+}
+
+customElements.define("footer-accordion-item", FooterAccordionItem);
diff --git a/js/components/newsletter-signup.js b/js/components/newsletter-signup.js
index ef855bc..6679935 100644
--- a/js/components/newsletter-signup.js
+++ b/js/components/newsletter-signup.js
@@ -180,7 +180,9 @@ class NewsletterSignup extends HTMLElement {
required
aria-label="E-mailadres"
/>
-