# Remark Header Module

This folder contains everything required to render the configurable global header that is managed from the **Remark ? Header** options page.

## Assets
- **acf.php** � Registers the header field group and exposes all configurable options inside wp-admin.
- **shortcodes.php** � Provides the `[remark_header]` shortcode. It reads the saved options, builds the navigation/CTA markup, and enqueues the header assets.
- **page.css** � Component-specific styling that lays out the header, dropdown menus, social icons, and language selector (loaded automatically via the shortcode).
- **page.js** � Vanilla JS that powers dropdown toggling, outside-click handling, and Escape key closing.

## Admin Fields Overview
ACF field tabs are organised into three logical groups:
1. **Branding** � Logo image/alt/URL plus the optional centre emblem link.
2. **Navigation** � Repeater for primary links, each with optional dropdown items and target settings.
3. **Actions** � Social icon repeater and language switcher configuration (button label/icon with repeater of destinations).

Anything left blank in admin is skipped when rendering, so empty dropdowns or social rows are ignored.

## Usage
1. Populate the fields under **Remark ? Header** inside wp-admin.
2. Place `[remark_header]` in Elementor, templates, or the site header hook.
3. No additional enqueue calls are necessary; CSS/JS load automatically whenever the shortcode is used.

## Notes
- Navigation dropdowns rely on the `data-remark-header-toggle="dropdown"` attribute managed by `page.js`.
- Asset handles follow `remark-header-*` naming via `remark_load_page_assets('header')` in `functions.php`.
- Adjust styling by editing `page.css`; keep the overall class structure to preserve feature parity.

## Custom Mega Menu (Remark)

This theme supports two kinds of mega menus in the header:

- Brands Mega Menu: generated by `remark_generate_brands_mega_menu()` and renders a centered grid of brand logos (unchanged layout).
- Custom Mega Menu: generated by `remark_generate_custom_mega_menu()` and intended for editorially authored links and a title/description.

Key implementation details for the Custom Mega Menu:

- PHP generator: `remark_generate_custom_mega_menu()` (file: `pages/header/shortcodes.php`).
- Wrapper markup: the custom menu outputs a container with the classes:
	- `remark-mega-menu` (shared base class)
	- `remark-mega-menu--custom` (modifier added to target custom-menu-only styles)

- Important DOM classes inside the menu:
	- Title: `.remark-mega-menu__title`
	- Items list: `.remark-mega-menu__list`
	- Item: `.remark-mega-menu__item`
	- Link: `.remark-mega-menu__link`

- ACF fields used by the generator:
	- `mega_menu_title` (string) — the heading/title shown in the menu
	- `mega_menu_items` (repeater) — each item should have:
		- `label` (string)
		- `url` (string)
		- `open_in_new` (boolean)

- Styles: `pages/header/page.css` (custom menu styles are scoped to `.remark-mega-menu--custom` so the Brands menu keeps its original layout).
- Behavior: `pages/header/page.js` (the `initMegaMenu()` function controls hover/open/close behavior and toggles the `is-open` class).

Editing guidance

- To change the custom menu layout or visual style, modify `page.css` under the `.remark-mega-menu--custom` selector. Do not change the global `.remark-mega-menu__brand-*` rules if you intend to preserve the Brands menu layout.
- To change markup or the data shape, edit `remark_generate_custom_mega_menu()` in `pages/header/shortcodes.php`. The function currently renders the title first, followed by the items list.
- If you need the visual order to differ from DOM/source order for accessibility, consider adjusting the PHP output order or adding explicit ARIA roles/labels — see `initMegaMenu()` in `page.js` for current interactive behavior.

Quick checklist for making changes safely

1. Update ACF fields (if you add/remove item properties) in `pages/header/acf.php` and re-sync with ACF in wp-admin.
2. Edit PHP generator (`shortcodes.php`) to change structure — keep classes intact where possible.
3. Update/extend CSS in `pages/header/page.css` and scope visual changes under `.remark-mega-menu--custom` to avoid affecting Brands.
4. Verify interactions in `pages/header/page.js` (hover, focus, keyboard escape) and update if new interactive elements are added.

If you'd like, I can add a short single-line summary at the top of `shortcodes.php` so future developers immediately recognize the generator function and ACF fields.