/*
 * PIFCE legacy preserved page (/pifce-legacy/).
 *
 * Faithful native replica of the original /pifce2026/ Elementor
 * design from the previous PCCIL website. Reconstructed from the
 * preserved _elementor_data on post 3812 (qa-tmp/pccc-elementor-3812.json)
 * so the client's reaction is "this looks like the old PIFCE page."
 *
 * Visual primitives from the Elementor source:
 *   - Hero: 33 / 66 split, Wave Makers logo left, Poppins 700 heading
 *     right, two lines broken by <br>, no explicit font size (large)
 *   - Partner strip: 10 columns across, white background
 *   - Nav bar: cream #E7DBCA background, transparent Poppins 600
 *     buttons with #0D0D0D text
 *   - Cardboard banner: full-width cardboard.jpg (attachment 4668)
 *     background, centred Poppins 600 strap-line
 *   - Body: narrow white container, Poppins 400/700 copy
 *   - Closing: full-width Untitled-design.png (attachment 4758)
 *
 * This stylesheet overrides the base PCCIL typography/components
 * for the single .pccc-pifce-legacy main wrapper only.
 */

/* Poppins is loaded via <link rel="preconnect"> + <link rel="stylesheet">
 * in page-templates/pifce-legacy.php so it only ships on this route. */

.pccc-pifce-legacy {
	--legacy-cream: #E7DBCA;
	--legacy-nav-text: #0D0D0D;
	--legacy-ink: #1a1a1a;
	--legacy-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	font-family: var(--legacy-font);
	color: var(--legacy-ink);
	background: #ffffff;
}

/* Prevent the base PCCIL section padding from leaking in: our sections
 * handle their own spacing to match the Elementor rhythm. */
.pccc-pifce-legacy > section {
	padding: 0;
}

/* ------------------------------------------------------------------
   SECTION 0 - Hero split (33 / 66 wave-makers + big heading)
   ------------------------------------------------------------------ */
.pccc-pifce-legacy__hero {
	background: #ffffff;
	padding: 48px 24px 24px;
}
.pccc-pifce-legacy__hero-inner {
	max-width: 1140px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 33% 1fr;
	gap: 24px;
	align-items: center;
}
.pccc-pifce-legacy__hero-brand {
	display: flex;
	align-items: center;
	justify-content: center;
}
.pccc-pifce-legacy__hero-brand img {
	display: block;
	width: 100%;
	max-width: 360px;
	height: auto;
}
.pccc-pifce-legacy__hero-text {
	padding: 24px;
}
.pccc-pifce-legacy__hero-title {
	font-family: var(--legacy-font);
	font-weight: 700;
	font-size: clamp(1.6rem, 3.2vw, 2.6rem);
	line-height: 1.15;
	margin: 0;
	color: var(--legacy-ink);
}

@media (max-width: 820px) {
	.pccc-pifce-legacy__hero-inner {
		grid-template-columns: 1fr;
		gap: 12px;
		text-align: center;
	}
	.pccc-pifce-legacy__hero-text { padding: 12px 8px 0; }
	.pccc-pifce-legacy__hero-brand img { max-width: 260px; }
}

/* ------------------------------------------------------------------
   SECTION 1 - 10-column partner / organiser logo strip
   ------------------------------------------------------------------ */
.pccc-pifce-legacy__logostrip {
	background: #ffffff;
	padding: 16px 12px;
}
.pccc-pifce-legacy__logostrip-inner {
	max-width: 1140px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(10, minmax(0, 1fr));
	gap: 8px;
	align-items: center;
}
.pccc-pifce-legacy__logo {
	display: flex;
	align-items: center;
	justify-content: center;
}
.pccc-pifce-legacy__logo img {
	max-width: 100%;
	max-height: 90px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

@media (max-width: 1023px) {
	.pccc-pifce-legacy__logostrip-inner {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 14px;
	}
	.pccc-pifce-legacy__logo img { max-height: 110px; }
}
@media (max-width: 560px) {
	.pccc-pifce-legacy__logostrip-inner {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 14px;
	}
	.pccc-pifce-legacy__logo img { max-height: 90px; }
}

/* ------------------------------------------------------------------
   SECTION 2 - Cream nav bar with transparent-fill buttons
   ------------------------------------------------------------------ */
.pccc-pifce-legacy__navbar {
	background: var(--legacy-cream);
	padding: 12px 16px;
}
.pccc-pifce-legacy__navbar-inner {
	max-width: 1140px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 4px;
}
.pccc-pifce-legacy__navbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	background: transparent;
	color: var(--legacy-nav-text);
	font-family: var(--legacy-font);
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border: 0;
	border-radius: 2px;
	transition: background 0.15s ease, color 0.15s ease;
}
.pccc-pifce-legacy__navbtn:hover,
.pccc-pifce-legacy__navbtn:focus-visible {
	background: rgba(13, 13, 13, 0.08);
	color: var(--legacy-nav-text);
	outline: none;
}

@media (max-width: 640px) {
	.pccc-pifce-legacy__navbtn {
		padding: 10px 12px;
		font-size: 0.9rem;
	}
}

/* ------------------------------------------------------------------
   SECTION 3 - Cardboard-textured strap-line banner
   ------------------------------------------------------------------ */
.pccc-pifce-legacy__cardboard {
	background-color: #c7a97a;
	background-size: cover;
	background-position: center center;
	background-repeat: repeat;
	padding: 60px 20px;
}
.pccc-pifce-legacy__cardboard-inner {
	max-width: 1000px;
	margin: 0 auto;
}
.pccc-pifce-legacy__cardboard-text {
	margin: 0;
	font-family: var(--legacy-font);
	font-weight: 600;
	font-size: clamp(1.2rem, 2.4vw, 1.75rem);
	line-height: 1.35;
	text-align: center;
	color: var(--legacy-ink);
}

/* ------------------------------------------------------------------
   SECTION 4 - Body copy (narrow white container)
   ------------------------------------------------------------------ */
.pccc-pifce-legacy__body-section {
	background: #ffffff;
	padding: 48px 20px 32px;
}
.pccc-pifce-legacy__body-inner {
	max-width: 820px;
	margin: 0 auto;
	font-family: var(--legacy-font);
	font-weight: 400;
	color: var(--legacy-ink);
	font-size: 1rem;
	line-height: 1.6;
}
.pccc-pifce-legacy__body-inner p {
	margin: 0 0 1.1em;
	font-family: var(--legacy-font);
	font-weight: 400;
}
.pccc-pifce-legacy__body-inner p:last-child { margin-bottom: 0; }
.pccc-pifce-legacy__body-inner h1,
.pccc-pifce-legacy__body-inner h2,
.pccc-pifce-legacy__body-inner h3 {
	font-family: var(--legacy-font);
	font-weight: 700;
	line-height: 1.25;
	margin: 2em 0 0.6em;
	color: var(--legacy-ink);
}
.pccc-pifce-legacy__body-inner h2 {
	font-size: clamp(1.3rem, 2.4vw, 1.6rem);
}
.pccc-pifce-legacy__body-inner h3 {
	font-size: clamp(1.15rem, 2vw, 1.35rem);
}
.pccc-pifce-legacy__body-inner strong { font-weight: 700; }
.pccc-pifce-legacy__body-inner a {
	color: #398AA0;
	text-decoration: underline;
}
/* Original Elementor used `<p class="p2">• text</p>` paragraphs for
 * bullets rather than a semantic list. Tighten the vertical rhythm
 * on those so the visual block reads as a list, matching the old
 * page where each bullet sat close to the next. */
.pccc-pifce-legacy__body-inner p.p1,
.pccc-pifce-legacy__body-inner p.p2 { margin: 0.25em 0; }

/* ------------------------------------------------------------------
   SECTION 5 - Full-width closing image
   ------------------------------------------------------------------ */
.pccc-pifce-legacy__closing {
	background: #ffffff;
	padding: 0 0 32px;
	text-align: center;
}
.pccc-pifce-legacy__closing img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}