/*
 * OWFR Interactive Pathway Map — Frontend Styles
 *
 * All selectors use the unique "owfr-pm-" prefix to prevent conflicts
 * with Divi or any other theme/builder styles present on the page.
 *
 * CSS custom properties make it straightforward to adapt colours and
 * spacing to OWFR branding without editing this file directly:
 * override the variables in your child theme or a Custom CSS block.
 *
 * Responsive breakpoints:
 *   ≥ 701px   → 3-column grid
 *   481–700px → 2-column grid
 *   ≤ 480px   → 1-column stack
 *
 * Progressive enhancement:
 *   Without JS  — all panels display as normal block elements (fully readable).
 *   With JS     — the script adds .owfr-pm-js-enabled to .owfr-pm-wrapper,
 *                 activating the accordion UI, smooth transitions, and ARIA state.
 * ============================================================================
 */

/* --------------------------------------------------------------------------
   CSS Custom Properties — override these to match OWFR branding
   -------------------------------------------------------------------------- */
:root {
	--owfr-pm-accent:         #006B3F;    /* Primary brand colour (OWFR green)     */
	--owfr-pm-accent-dark:    #005430;    /* Darker hover/active shade             */
	--owfr-pm-accent-light:   #eef6f1;    /* Very light tint for backgrounds       */
	--owfr-pm-text:           #1a2533;    /* Primary text colour                   */
	--owfr-pm-text-muted:     #5a6a7a;    /* Secondary / description text          */
	--owfr-pm-border:         #dce3ea;    /* Card and panel borders                */
	--owfr-pm-card-bg:        #ffffff;    /* Card background                       */
	--owfr-pm-shadow:         0 2px 12px rgba(0, 107, 63, 0.08);
	--owfr-pm-shadow-hover:   0 6px 24px rgba(0, 107, 63, 0.15);
	--owfr-pm-radius:         14px;       /* Card corner radius                    */
	--owfr-pm-transition:     280ms ease; /* Transition duration (match JS value)  */
}

/* --------------------------------------------------------------------------
   Section wrapper
   -------------------------------------------------------------------------- */
.owfr-pm-wrapper {
	box-sizing: border-box;
	font-family: inherit;    /* Respect the theme's font stack */
	color: var(--owfr-pm-text);
	padding: 48px 20px 56px;
	max-width: 1120px;
	margin-inline: auto;
}

/* Apply box-sizing to all children without leaking outside the component */
.owfr-pm-wrapper *,
.owfr-pm-wrapper *::before,
.owfr-pm-wrapper *::after {
	box-sizing: inherit;
}

/* --------------------------------------------------------------------------
   Heading and intro text
   -------------------------------------------------------------------------- */
.owfr-pm-heading {
	text-align: center;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 700;
	color: var(--owfr-pm-text);
	margin: 0 0 14px;
	line-height: 1.2;
}

.owfr-pm-intro {
	text-align: center;
	font-size: 1rem;
	color: var(--owfr-pm-text-muted);
	max-width: 600px;
	margin: 0 auto 44px;
	line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Card grid
   -------------------------------------------------------------------------- */
.owfr-pm-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	align-items: start;  /* Cards don't stretch — they shrink to content height */
	justify-content: center;
}

@media (max-width: 700px) {
	.owfr-pm-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.owfr-pm-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}

/* --------------------------------------------------------------------------
   Individual card
   -------------------------------------------------------------------------- */
.owfr-pm-card {
	background: var(--owfr-pm-card-bg);
	border: 1px solid var(--owfr-pm-border);
	border-radius: var(--owfr-pm-radius);
	box-shadow: var(--owfr-pm-shadow);
	transition:
		box-shadow var(--owfr-pm-transition),
		border-color var(--owfr-pm-transition);
	overflow: hidden;
}

.owfr-pm-card:hover {
	box-shadow: var(--owfr-pm-shadow-hover);
}

/* Highlight the open card */
.owfr-pm-card--open {
	border-color: var(--owfr-pm-accent);
}

/* --------------------------------------------------------------------------
   Card trigger button (the clickable header)
   -------------------------------------------------------------------------- */
.owfr-pm-card__trigger {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding: 28px 20px 22px;
	background: transparent;
	border: none;
	cursor: pointer;
	text-align: center;
	gap: 14px;
	color: var(--owfr-pm-text);
	transition: background var(--owfr-pm-transition);
	/* Ensure button text inherits theme font */
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

.owfr-pm-card__trigger:hover {
	background: var(--owfr-pm-accent-light);
}

/* Keyboard focus ring — visible and well-positioned */
.owfr-pm-card__trigger:focus-visible {
	outline: 3px solid var(--owfr-pm-accent);
	outline-offset: -3px;
	border-radius: calc(var(--owfr-pm-radius) - 1px) calc(var(--owfr-pm-radius) - 1px) 0 0;
}

/* --------------------------------------------------------------------------
   Icon (no circle — bare SVG)
   -------------------------------------------------------------------------- */
.owfr-pm-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* SVG icon image (bare, no circle background) */
.owfr-pm-card__icon img {
	width: 52px;
	height: 52px;
	object-fit: contain;
	flex-shrink: 0;
	transition: opacity var(--owfr-pm-transition);
}

.owfr-pm-card__trigger:hover .owfr-pm-card__icon img,
.owfr-pm-card--open .owfr-pm-card__icon img {
	opacity: 0.8;
}

/* --------------------------------------------------------------------------
   Title and description text block
   -------------------------------------------------------------------------- */
.owfr-pm-card__header-text {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.owfr-pm-card__title {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	color: var(--owfr-pm-text);
	line-height: 1.3;
}

.owfr-pm-card__description {
	display: block;
	font-size: 0.8125rem;
	color: var(--owfr-pm-text-muted);
	line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Chevron indicator
   -------------------------------------------------------------------------- */
.owfr-pm-card__chevron {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--owfr-pm-text-muted);
	transition:
		transform var(--owfr-pm-transition),
		color var(--owfr-pm-transition);
}

.owfr-pm-card__chevron svg {
	flex-shrink: 0;
	display: block;
}

/* Flip the chevron when the card is open */
.owfr-pm-card--open .owfr-pm-card__chevron {
	transform: rotate(180deg);
	color: var(--owfr-pm-accent);
}

/* Hide chevron when JS is absent (accordion not active) */
.owfr-pm-card__chevron {
	display: none;
}

/* JS class enables chevron and accordion UI */
.owfr-pm-js-enabled .owfr-pm-card__chevron {
	display: flex;
}

/* --------------------------------------------------------------------------
   Expandable link panel
   --------------------------------------------------------------------------
   Without JS: panel is a normal block element — fully visible and readable.
   With JS:    .owfr-pm-js-enabled activates the max-height transition;
               the panel's inline max-height is managed by pathway-map.js.
   -------------------------------------------------------------------------- */

/* No-JS default: panel is visible */
.owfr-pm-card__panel {
	border-top: 1px solid transparent;
	transition:
		border-color var(--owfr-pm-transition);
}

/* JS-enabled: hide panel via max-height animation */
.owfr-pm-js-enabled .owfr-pm-card__panel {
	overflow: hidden;
	max-height: 0;           /* Overridden by inline style from pathway-map.js */
	transition:
		max-height var(--owfr-pm-transition),
		border-color var(--owfr-pm-transition);
}

/* Show a separator line above the links when the card is open */
.owfr-pm-card--open .owfr-pm-card__panel {
	border-top-color: var(--owfr-pm-border);
}

/* --------------------------------------------------------------------------
   Link list — pill button style
   -------------------------------------------------------------------------- */
.owfr-pm-card__links {
	/* Hard-reset list styles — overrides Divi and any theme defaults */
	list-style: none !important;
	list-style-type: none !important;
	margin: 0 !important;
	padding: 12px 14px 16px !important;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Remove any pseudo-element bullets Divi injects */
.owfr-pm-card__links li::before,
.owfr-pm-card__links li::after {
	content: none !important;
	display: none !important;
}

.owfr-pm-card__link-item {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.owfr-pm-card__link {
	display: block;
	width: 100%;
	padding: 9px 16px;
	font-size: 0.8125rem;
	font-weight: 600;
	font-family: inherit;
	color: var(--owfr-pm-accent) !important;
	background: transparent;
	border: 1.5px solid var(--owfr-pm-accent);
	border-radius: 999px;        /* Full pill shape */
	text-align: center;
	text-decoration: none !important;
	line-height: 1.4;
	cursor: pointer;
	transition:
		background var(--owfr-pm-transition),
		color var(--owfr-pm-transition),
		border-color var(--owfr-pm-transition),
		box-shadow var(--owfr-pm-transition);
}

.owfr-pm-card__link:hover {
	background: var(--owfr-pm-accent) !important;
	color: #ffffff !important;
	border-color: var(--owfr-pm-accent);
	text-decoration: none !important;
	box-shadow: 0 2px 8px rgba(0, 107, 63, 0.3);
}

.owfr-pm-card__link:focus-visible {
	outline: 3px solid var(--owfr-pm-accent);
	outline-offset: 2px;
	background: var(--owfr-pm-accent-light) !important;
	color: var(--owfr-pm-accent-dark) !important;
}

/* --------------------------------------------------------------------------
   Reduced-motion preference — disable all transitions
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.owfr-pm-card,
	.owfr-pm-card__trigger,
	.owfr-pm-card__icon img,
	.owfr-pm-js-enabled .owfr-pm-card__panel,
	.owfr-pm-card__panel,
	.owfr-pm-card__chevron,
	.owfr-pm-card__link {
		transition: none;
	}
}