# Career Page Module

This directory contains the code that powers the Remark career landing experience. It defines all Advanced Custom Fields (ACF) options, shortcodes used to render the front end, and the assets that style and animate each section.

## Files at a Glance
- `acf.php` - Registers the `Career Settings` options page field group and ties it to the `remark-career` options post. Includes tabs for hero, culture, life at Remark, growth, benefits, jobs, FAQ, and CTA banner content.
- `shortcodes.php` - Renders the public markup for each section and exposes shortcodes that load the CSS/JS bundle via `remark_load_page_assets('career')`. Each renderer safely escapes option values before output, including the CTA banner block.
- `page.css` - Component-level styles for every section (`.remark-career-*`). Includes responsive layouts, card treatments, FAQ accordion presentation, and the CTA banner treatment.
- `page.js` - Placeholder for page-level behaviour. Currently only wires a `DOMContentLoaded` hook.
- `page.anim.js` - Optional GSAP + ScrollTrigger animation hook that fades in `.remark-section--career` blocks when they enter the viewport.

## Available Shortcodes
| Shortcode | Description |
| --- | --- |
| `[remark_career]` | Hero section with title, intro copy, CTA, avatars, and hero image. |
| `[remark_career_culture]` | "Our Culture" cards with metrics and testimonials. |
| `[remark_career_life]` | "Life at Remark" image plus text content block. |
| `[remark_career_growth]` | Growth and learning highlight section. |
| `[remark_career_benefits]` | Benefits grid with featured badge and bullet list. |
| `[remark_career_jobs]` | Job listings cards sourced from the Jobs repeater, including type, salary, location, and status. |
| `[remark_career_faq]` | FAQ accordion rendered with `<details>` elements. |
| `[remark_career_cta_banner]` | Full-width CTA banner with background image, copy, and animated button. |

All sections pull content from the `Career Settings` options page (ACF). Empty sections bail out early, so only populate the shortcodes you need.

## Content Model Notes
- Hero, culture, life, growth, benefits, jobs, FAQ, and CTA banner tabs live under `Remark + Career` in the dashboard.
- Text areas use newline-delimited values to control line breaks (`remark_career_get_title_lines()` handles splitting).
- Jobs repeater entries support a `duplicate` toggle that downstream logic can use to clone postings.

## Front-End Behaviour
- Styles are namespaced under `.remark-career-*` to avoid bleeding into other templates.
- `page.anim.js` requires both `gsap` and `ScrollTrigger` on `window` before it runs. If those libraries are absent, the animations automatically skip.
- The asset loader `remark_load_page_assets('career')` is invoked inside every shortcode, ensuring CSS/JS is enqueued exactly once per request.

## Development Tips
- Keep new markup wrapped in `.remark-section--career` if you want it to animate with GSAP.
- When extending ACF fields, mirror the field keys and naming conventions to stay consistent with existing option lookups.
- Run styles through the existing syntax (vanilla CSS) and keep typography tokens aligned with the design variables already in use.