feat(slides): add persistent branding with per-slide visibility control

- Add branding overlays: logo, title, author, and footer text
- Use Reveal.js theme CSS variables for automatic color adaptation
- Inline SVGs for currentColor support on any theme
- Per-slide control via HTML comments:
  - <!-- no-branding -->: hide all elements
  - <!-- no-header -->: hide logo + title
  - <!-- no-footer -->: hide author + footer
- Fix body-level CSS selectors for proper visibility
- Add comprehensive documentation in example slides

modules/slides/layouts/_partials/hooks/slide-body-end/_example.html

@@ -0,0 +1,22 @@
+{{/*
+  Example Slide Body-End Hook
+  
+  This hook allows injecting custom JavaScript at the end of the <body>
+  tag, after Reveal.js has been loaded. Useful for:
+  - Custom Reveal.js plugins
+  - Analytics tracking on slide changes
+  - Custom keyboard shortcuts
+  - Integration with other JS libraries
+  
+  To use this hook, create a file at:
+    layouts/_partials/hooks/slide-body-end/your-custom-script.html
+*/}}
+
+{{/* Uncomment below to track slide changes with console logging */}}
+{{/*
+<script>
+  Reveal.on('slidechanged', event => {
+    console.log('Slide changed to:', event.indexh, event.indexv);
+  });
+</script>
+*/}}

modules/slides/layouts/_partials/hooks/slide-footer/_example.html

@@ -0,0 +1,20 @@
+{{/*
+  Example Slide Footer Hook
+  
+  This is an example file showing how to create custom footer content
+  that appears at the bottom of every slide in a presentation.
+  
+  To use this hook, create a file at:
+    layouts/_partials/hooks/slide-footer/your-custom-footer.html
+  
+  The content will be rendered inside a <div class="slide-footer"> container.
+  
+  Example usage: show social media handle or contact info
+*/}}
+
+{{/* Uncomment below to show author's social handle in footer */}}
+{{/*
+<div style="font-size: 0.5em; color: rgba(255,255,255,0.5); padding: 10px; text-align: right; width: 100%;">
+  @yourhandle
+</div>
+*/}}

modules/slides/layouts/_partials/hooks/slide-head-end/_example.html

@@ -0,0 +1,25 @@
+{{/*
+  Example Slide Head-End Hook
+  
+  This hook allows injecting custom CSS or JavaScript into the <head>
+  section of the presentation. Useful for:
+  - Custom fonts
+  - Additional CSS frameworks
+  - Analytics scripts
+  - Custom Reveal.js configurations
+  
+  To use this hook, create a file at:
+    layouts/_partials/hooks/slide-head-end/your-custom-head.html
+*/}}
+
+{{/* Uncomment below to add custom font */}}
+{{/*
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap" rel="stylesheet">
+<style>
+  .reveal pre code {
+    font-family: 'Fira Code', monospace;
+  }
+</style>
+*/}}

modules/slides/layouts/_partials/hooks/slide-header/_example.html

@@ -0,0 +1,30 @@
+{{/*
+  Example Slide Header Hook
+  
+  This is an example file showing how to create custom header content
+  that appears at the top of every slide in a presentation.
+  
+  To use this hook, create a file at:
+    layouts/_partials/hooks/slide-header/your-custom-header.html
+  
+  The content will be rendered inside a <div class="slide-header"> container.
+  
+  Available context variables:
+    .Title - Presentation title
+    .Params - All front matter parameters
+    .Params.authors - List of authors
+    .Params.course - Course code/name
+    .Params.venue - Event venue
+    .Date - Presentation date
+    
+  Example usage:
+*/}}
+
+{{/* Uncomment below to show course code in header */}}
+{{/*
+{{ with .Params.course }}
+  <div style="font-size: 0.6em; color: rgba(255,255,255,0.6); padding: 10px;">
+    {{ . }}{{ with $.Params.lecture_number }} · Lecture {{ . }}{{ end }}
+  </div>
+{{ end }}
+*/}}