/* Home page bands (loads after system.css). Every section of content/home.json renders here in the
   system language: white / sand bands with one eucalyptus band, flat cards with 1px line borders,
   one 8px radius, the 1.25 type scale and the 4-64px spacing scale. Long prose sits in a two-column
   split beside a supporting panel (key facts, related links, tables). */

/* ------------------------------------------------ Two-column split: prose + supporting panel */
.pe-hx-split { display: grid; gap: var(--sp-6); align-items: start; }
.pe-hx-split__main { min-width: 0; }
.pe-hx-split__main > h2 { margin-bottom: var(--sp-4); }
@media (min-width: 1000px) {
	.pe-hx-split { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--sp-8); }
	.pe-hx-split--even { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-7); }
}
.pe-hx-prose p { max-width: 70ch; line-height: var(--lh-body); }
.pe-hx-prose > :last-child { margin-bottom: 0; }
.pe-hx-prose a, .pe-hx-panel .pe-prose a { color: var(--ocean); text-underline-offset: .18em; }
.pe-hx-prose a:hover, .pe-hx-panel .pe-prose a:hover { color: var(--euc); }

/* Supporting panel: flat, 1px border; sand on white bands, white on sand bands */
.pe-hx-panel { min-width: 0; padding: var(--sp-5); background: var(--sand); border: 1px solid var(--line); border-radius: var(--radius); }
.pe-band--sand .pe-hx-panel { background: var(--white); }
.pe-hx-panel__h { font: 600 var(--fs-1)/var(--lh-head) var(--f-head); letter-spacing: -.01em; margin: 0 0 var(--sp-4); }
.pe-hx-panel__h2 { font-size: var(--fs-1); margin: 0 0 var(--sp-3); }
.pe-hx-panel__lead { margin: 0 0 var(--sp-4); color: var(--muted); }
.pe-hx-panel__sub { margin: var(--sp-5) 0 var(--sp-1); font: 600 var(--fs--1)/1.3 var(--f-body); color: var(--muted); }
.pe-hx-panel--media { padding: 0; overflow: hidden; }
.pe-hx-panel__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
.pe-hx-panel__body { padding: var(--sp-5); }
.pe-hx-panel__body .pe-prose { font-size: var(--fs-0); }
.pe-hx-panel__body .pe-prose > :last-child { margin-bottom: 0; }
.pe-hx-panel .pe-iconlink { border-bottom-color: var(--line); }
.pe-hx-panel .pe-table-wrap { margin: 0; }
.pe-hx-panel .pe-table td { padding: var(--sp-3) var(--sp-4); }
.pe-hx-panel .pe-table thead th { padding: var(--sp-3) var(--sp-4); }
.pe-hx-panel .pe-table tbody tr:last-child td { border-bottom: 0; }

@media (min-width: 1000px) { .pe-hx-law .pe-hx-panel { position: sticky; top: calc(var(--header-h-min, 60px) + var(--sp-5)); } }

/* Note box inside a panel (NSW and Queensland) */
.pe-hx-note { margin-top: var(--sp-5); padding: var(--sp-4); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.pe-hx-note__h { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); font: 600 var(--fs-0)/1.3 var(--f-head); }
.pe-hx-note__h .pe-micon { flex: none; color: var(--euc); }
.pe-hx-note p:last-child { margin: 0; line-height: 1.55; }

/* Key facts and related links */
.pe-hx-facts { list-style: none; margin: 0; padding: 0; display: grid; }
.pe-hx-facts li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); font-weight: 600; line-height: var(--lh-snug); }
.pe-hx-facts li:first-child { padding-top: 0; }
.pe-hx-facts .pe-micon { flex: none; color: var(--euc); }
.pe-hx-related { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-1); }
.pe-hx-related a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ocean); font-weight: 600; text-underline-offset: .18em; }
.pe-hx-related a:hover { color: var(--euc); }

/* ------------------------------------------------ Flat cards (routes, tools, guides) */
.pe-hx-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .pe-hx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pe-hx-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pe-hx-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pe-hx-card { position: relative; display: flex; flex-direction: column; padding: var(--sp-5); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.pe-hx-card:hover { border-color: var(--euc); }
.pe-hx-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: 0 0 var(--sp-3); }
.pe-hx-card__ico { display: flex; color: var(--euc); margin: 0 0 var(--sp-3); }
.pe-hx-card__top .pe-hx-card__ico { margin: 0; }
.pe-hx-card__t { font: 600 var(--fs-0)/1.3 var(--f-head); letter-spacing: -.01em; margin: 0 0 var(--sp-2); }
.pe-hx-card__t a { color: var(--ink); text-decoration: none; }
.pe-hx-card:hover .pe-hx-card__t a { color: var(--euc); text-decoration: underline; text-underline-offset: .18em; }
.pe-hx-card p { margin: 0; color: var(--muted); line-height: 1.5; }
.pe-hx-tag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--sp-2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); font: 600 var(--fs--1)/1 var(--f-head); color: var(--ink); white-space: nowrap; }
.pe-hx-tag--free { background: var(--euc); border-color: var(--euc); color: var(--white); }

/* Guides */
.pe-hx-guide__k { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-3) !important; font: 600 var(--fs--1)/1.3 var(--f-body); color: var(--muted); }
.pe-hx-guide__k .pe-micon { color: var(--euc); }
.pe-hx-guide__go { margin-top: auto; padding-top: var(--sp-4); font-weight: 600; color: var(--ocean); }
.pe-hx-guide p:not(.pe-hx-guide__k) { margin-bottom: 0; }

/* ------------------------------------------------ National Law: each category as a flat definition card */
.pe-hx-defs ul { list-style: none; margin: var(--sp-5) 0; padding: 0; display: grid; gap: var(--sp-3); }
.pe-hx-defs li { margin: 0; padding: var(--sp-4) var(--sp-5); background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--euc); border-radius: var(--radius); line-height: 1.55; }
.pe-hx-defs li strong:first-child { display: block; margin: 0 0 var(--sp-1); font: 600 var(--fs-0)/1.3 var(--f-head); }
.pe-hx-defs li strong:first-child a { color: var(--ink); text-decoration: none; }
.pe-hx-defs li strong:first-child a:hover { color: var(--euc); text-decoration: underline; }

/* What we are / what we are not: claims as flat cards with a check */
.pe-hx-claims ul { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
@media (min-width: 760px) { .pe-hx-claims ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pe-hx-claims li:first-child { grid-column: 1 / -1; } }
.pe-hx-claims li { position: relative; margin: 0; padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-7); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); line-height: 1.5; }
.pe-hx-claims li::before { content: ""; position: absolute; left: var(--sp-4); top: calc(var(--sp-4) + 3px); width: 18px; height: 10px; border-left: 2px solid var(--euc); border-bottom: 2px solid var(--euc); transform: rotate(-45deg) translate(2px, 0); }
.pe-hx-claims li strong { color: var(--ink); }

/* ------------------------------------------------ Courses: ten cards */
@media (min-width: 1000px) { .pe-hx-courses .pe-courses--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .pe-hx-courses .pe-courses--4 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ------------------------------------------------ How it works: full step texts */
.pe-hx-how .pe-h-step p { line-height: 1.55; }
@media (max-width: 759px) { .pe-hx-how .pe-h-step p { font-size: var(--fs-0); } }

/* ------------------------------------------------ Eucalyptus band: free mini course */
.pe-hx-euc { background: var(--euc); color: var(--on-dark); }
.pe-hx-euc h2 { color: var(--white); }
.pe-hx-free__in { display: grid; gap: var(--sp-4) var(--sp-6); align-items: center; }
.pe-hx-free__ico { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--radius); color: var(--white); }
.pe-hx-free__txt h2 { margin: 0 0 var(--sp-2); }
.pe-hx-free__txt p { margin: 0 0 var(--sp-4); max-width: 64ch; color: var(--on-dark); }
.pe-hx-free__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font-weight: 600; color: var(--white); }
.pe-hx-free__facts li { display: flex; align-items: center; gap: var(--sp-2); }
.pe-hx-free__act { margin: 0; }
.pe-hx-btn-white, .pe-btn.pe-hx-btn-white { background: var(--white); border-color: var(--white); color: var(--euc); }
.pe-hx-btn-white:hover, .pe-btn.pe-hx-btn-white:hover { background: var(--euc-tint); border-color: var(--euc-tint); color: var(--euc-deep); }
@media (min-width: 900px) { .pe-hx-free__in { grid-template-columns: auto minmax(0, 1fr) auto; } }

/* ------------------------------------------------ Organisations and pricing */
.pe-hx-orgs .pe-sec__intro { margin-bottom: var(--sp-5); }
.pe-hx-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.pe-hx-opt { position: relative; display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.pe-hx-opt:hover { border-color: var(--euc); }
.pe-hx-opt__ico { display: flex; flex: none; color: var(--euc); }
.pe-hx-opt__name { display: block; font: 600 var(--fs-0)/1.3 var(--f-head); color: var(--ink); text-decoration: none; }
.pe-hx-opt:hover .pe-hx-opt__name { color: var(--euc); text-decoration: underline; }
.pe-hx-opt__desc { display: block; margin-top: var(--sp-1); color: var(--muted); line-height: 1.5; }
.pe-hx-pricing { margin: var(--sp-6) 0 0; padding-top: var(--sp-5); border-top: 1px solid var(--sand-2); }
.pe-hx-pricing h3 { margin: 0 0 var(--sp-2); }
.pe-hx-pricing .pe-prose { max-width: 68ch; }
.pe-hx-pricing .pe-prose p:last-child { margin-bottom: 0; }
.pe-hx-pricing a { color: var(--ocean); }
.pe-hx-acts { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-6) 0 0; }

/* ------------------------------------------------ FAQ help card and sources */
.pe-hx-help { margin-top: var(--sp-5); padding: var(--sp-5); background: var(--sand); border: 1px solid var(--line); border-radius: var(--radius); }
.pe-hx-help p { margin: 0 0 var(--sp-3); }
.pe-hx-help__h { display: flex; align-items: center; gap: var(--sp-2); font: 600 var(--fs-0)/1.3 var(--f-head); }
.pe-hx-help__h .pe-micon { color: var(--euc); flex: none; }
.pe-hx-help .pe-h-faq__links { margin-bottom: var(--sp-3); }
.pe-hx-help .pe-h-faq__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ocean); }
.pe-hx-help__mail { display: flex; align-items: center; gap: var(--sp-2); margin: 0 !important; padding-top: var(--sp-3); border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.pe-hx-help__mail .pe-micon { color: var(--euc); flex: none; }
.pe-hx-help__mail a { color: var(--ocean); }
.pe-h-faq .pe-faq__a p { margin: 0; line-height: var(--lh-body); }

.pe-hx-sources { margin-top: var(--sp-7); padding-top: var(--sp-7); border-top: 1px solid var(--line); }
.pe-hx-sources h2 { margin-bottom: var(--sp-4); }
.pe-hx-sources .pe-sources { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .pe-hx-sources .pe-sources { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pe-hx-sources .pe-sources { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pe-hx-sources .pe-sources li { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--fs-0); line-height: 1.4; }
.pe-hx-sources .pe-sources li > .pe-micon { flex: none; color: var(--euc); margin-top: 2px; }
.pe-hx-sources .pe-sources a { color: var(--ocean); overflow-wrap: anywhere; }
.pe-hx-sources .pe-sources__host { display: block; margin-top: var(--sp-1); font-size: var(--fs--1); color: var(--muted); }
.pe-hx-sources .pe-sources__note { margin: var(--sp-4) 0 0; color: var(--muted); }