/* ─── Public site stylesheet — CMS Phase 3 ─────────────────────────────────── */
/* Used by public templates: default, landing, campaign, privacy_notice        */

@font-face {
    font-family: 'Canva-Sans';
    src: url('../fonts/CanvaSans-Regular.woff2') format('woff2');
    font-weight: 400;      /* adjust to match the font weight */
    font-style: normal;
    font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --color-primary:      #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-text:         #111827;
    --color-text-muted:   #6b7280;
    --color-border:       #e5e7eb;
    --color-bg:           #f9fafb;
    --color-surface:      #ffffff;
    --radius-md:          8px;
    --radius-lg:          12px;
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --container-width:    1100px;
    --container-narrow:   720px;
}

html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--color-surface);
    line-height: 1.7;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ─── Container ─────────────────────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.container--narrow { max-width: var(--container-narrow); }

/* ─── Site header ───────────────────────────────────────────────────────────── */
.site-header {
    border-bottom: 1px solid var(--color-border);
    padding: .875rem 0;
    background: var(--color-surface);
    position: sticky;
    top: 0;
    z-index: 100;
}
.site-header-inner {
    display: flex;
    align-items: center;
    gap: 2rem;
}
.site-logo {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    letter-spacing: -.02em;
    flex-shrink: 0;
}
.site-nav { display: flex; gap: 1.25rem; flex: 1; }
.site-nav a {
    font-size: .9375rem;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color .15s;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--color-text); }
.site-header-admin {
    font-size: .8125rem;
    color: var(--color-text-muted);
    text-decoration: none;
    padding: .25rem .75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: all .15s;
}
.site-header-admin:hover { color: var(--color-text); background: var(--color-bg); }

/* ─── Main content ──────────────────────────────────────────────────────────── */
.page-content {
    flex: 1;
    padding: 3rem 0;
}
.page-content h1 { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; }

/* ─── Content body ──────────────────────────────────────────────────────────── */
.content-body { max-width: var(--container-narrow); }
.content-body h1 { font-size: 2rem; font-weight: 700; margin: 1.5rem 0 .75rem; }
.content-body h2 { font-size: 1.5rem; font-weight: 600; margin: 1.25rem 0 .625rem; }
.content-body h3 { font-size: 1.25rem; font-weight: 600; margin: 1rem 0 .5rem; }
.content-body p  { margin-bottom: 1rem; }
.content-body ul, .content-body ol { margin: 0 0 1rem 1.5rem; }
.content-body li { margin-bottom: .375rem; }
.content-body a  { color: var(--color-primary); }
.content-body a:hover { text-decoration: none; }

/* ─── Blocks ────────────────────────────────────────────────────────────────── */
.hero-block {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 2rem;
    font-size: 1.125rem;
}
.cta-block { margin: 2rem 0; }

/* ─── CTA button ────────────────────────────────────────────────────────────── */
.btn-cta {
    display: inline-block;
    padding: .75rem 1.75rem;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: background .15s;
}
.btn-cta:hover { background: var(--color-primary-dark); }
.btn-cta--large { padding: 1rem 2.5rem; font-size: 1.125rem; }

/* ─── Landing template ──────────────────────────────────────────────────────── */
.landing-body { background: var(--color-surface); }
.landing-main  { flex: 1; }
.landing-hero {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    padding: 5rem 1.5rem 4rem;
    text-align: center;
}
.landing-headline {
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 1rem;
    color: var(--color-text);
}
.landing-sub {
    font-size: 1.125rem;
    color: var(--color-text-muted);
    max-width: 560px;
    margin: 0 auto 2rem;
}
.landing-content { padding: 3rem 0; }
.landing-cta { padding: 3rem 1.5rem; text-align: center; background: var(--color-bg); }
.cta-sub { margin-top: .75rem; font-size: .9375rem; color: var(--color-text-muted); }

/* ─── Campaign template ─────────────────────────────────────────────────────── */
.campaign-body { background: var(--color-surface); }
.campaign-main  { flex: 1; }
.campaign-hero {
    background: var(--color-text);
    color: #fff;
    padding: 4rem 1.5rem;
    text-align: center;
}
.campaign-headline { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800; color: #fff; }
.campaign-sub { font-size: 1.125rem; color: rgba(255,255,255,.8); margin-top: .75rem; }
.campaign-content { padding: 3rem 0; }
.campaign-form-section { padding: 3rem 0; background: var(--color-bg); }
.campaign-form-wrap {
    max-width: 540px;
    margin: 0 auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
}

/* ─── Privacy notice template ───────────────────────────────────────────────── */
.privacy-notice { padding: 3rem 0; }
.privacy-header { margin-bottom: 2rem; }
.privacy-header h1 { font-size: 2rem; font-weight: 700; margin-bottom: .5rem; }
.privacy-updated { color: var(--color-text-muted); font-size: .9375rem; }
.privacy-dpo-card {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
    font-size: .9375rem;
    line-height: 1.7;
}
.privacy-dpo-card a { color: var(--color-primary); }
.privacy-body { margin-bottom: 2.5rem; }
.privacy-rights {
    background: var(--color-bg);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    margin-top: 2rem;
}
.privacy-rights h2 { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; }
.privacy-rights ul { margin-left: 1.25rem; }
.privacy-rights li { margin-bottom: .625rem; }
.privacy-rights p { margin-top: 1rem; }

/* ─── Site footer ───────────────────────────────────────────────────────────── */
.site-footer {
    border-top: 1px solid var(--color-border);
    padding: 1.5rem 0;
    background: var(--color-surface);
    margin-top: auto;
}
.site-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.footer-copy { font-size: .875rem; color: var(--color-text-muted); }
.footer-nav a {
    font-size: .875rem;
    color: var(--color-text-muted);
    text-decoration: none;
}
.footer-nav a:hover { color: var(--color-text); }

/* ─── Admin form extras (Phase 3) ───────────────────────────────────────────── */
.form-card--wide { max-width: 900px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group--full { grid-column: 1 / -1; }
.form-section {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    overflow: hidden;
}
.form-section-title {
    padding: .75rem 1rem;
    font-weight: 500;
    font-size: .9375rem;
    cursor: pointer;
    background: var(--color-bg);
    list-style: none;
    user-select: none;
}
.form-section-title:hover { background: var(--color-border); }
.form-section-body { padding: 1rem; }
.input-prefix { display: flex; align-items: stretch; }
.input-prefix-text {
    display: flex;
    align-items: center;
    padding: 0 .625rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-right: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    font-size: .875rem;
    color: var(--color-text-muted);
}
.input-prefix input {
    border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
}
.checkbox-label { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-size: .9375rem; }
.checkbox-label input[type=checkbox] { width: auto; }
.slug-link { color: var(--color-primary); font-size: .875rem; text-decoration: none; }
.slug-link:hover { text-decoration: underline; }
.mono-input { font-family: monospace; font-size: .875rem; }
.header-actions { display: flex; gap: .5rem; }
.required { color: #dc2626; }

/* ─── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .form-grid { grid-template-columns: 1fr; }
    .form-group--full { grid-column: auto; }
    .site-header-inner { flex-wrap: wrap; }
    .site-nav { width: 100%; flex-wrap: wrap; gap: .75rem; }
    .landing-hero { padding: 3rem 1rem 2.5rem; }
    .page-header { flex-direction: column; align-items: flex-start; gap: .75rem; }
}

/* ─── Site header nav additions ─────────────────────────────────────────────── */
.site-header-actions { display: flex; align-items: center; gap: .75rem; }

.nav-link {
    font-size: .9375rem;
    color: var(--color-text-muted, #5f5e5e);
    text-decoration: none;
    transition: color .15s;
    white-space: nowrap;
}
.nav-link:hover, .nav-link--active {
    color: var(--color-text, #111827);
    font-weight: 600;
}

.nav-dropdown { position: relative; }
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background: #fff;
    border: 1px solid var(--color-border, #e5e7eb);
    border-top: 2px solid #004D3E;
    border-radius: 0;
    box-shadow: 0 8px 24px rgba(6,27,14,.10);
    padding: .375rem 0;
    z-index: 100;
    margin-top: .5rem;
}
.nav-dropdown:hover .nav-dropdown-menu { display: block; }
.nav-dropdown-item {
    display: block;
    padding: .5rem 1rem;
    font-size: .875rem;
    color: var(--color-text-muted, #5f5e5e);
    text-decoration: none;
    transition: background .1s, color .1s;
}
.nav-dropdown-item:hover {
    background: var(--color-bg, #f9fafb);
    color: var(--color-text, #111827);
}
.nav-chevron { display: inline-block; vertical-align: middle; margin-left: 4px; }
/* Dropdown panel — Tailwind-rendered variant (site-header.php uses inline classes) */
.nav-dropdown-panel {
    border-radius: 0 !important;
    border-top: 2px solid #004D3E !important;
    box-shadow: 0 8px 24px rgba(6,27,14,.10) !important;
    margin-top: .5rem !important;
    transform-origin: top left;
    animation: dropdown-enter .18s ease forwards;
}

@keyframes dropdown-enter {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Dark mode accent line */
@media (prefers-color-scheme: dark) {
    .nav-dropdown-panel,
    .nav-dropdown-menu {
        border-top-color: #4ade80;
    }
}

/* Mobile nav toggle */
.site-nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: .25rem;
}
.site-nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-text, #111827);
    border-radius: 2px;
    transition: transform .2s;
}

@media (max-width: 768px) {
    .site-nav-toggle { display: flex; }
    .site-nav {
        display: none;
        flex-direction: column;
        gap: 0;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid var(--color-border, #e5e7eb);
        box-shadow: 0 4px 16px rgba(0,0,0,.08);
        padding: .5rem 0;
        z-index: 99;
    }
    .site-nav.is-open { display: flex; }
    .site-nav .nav-link { padding: .75rem 1.5rem; }
    .site-nav .nav-dropdown-menu {
            position: static;
            box-shadow: none;
            border: none;
            border-top: none;
            border-radius: 0;
            padding-left: 1.5rem;
            display: block;
            animation: none;
        }
}

/* ─── Tailwind utility subset ────────────────────────────────────────────────
   These mirror only the Tailwind classes used in site-header.php and
   site-footer.php. No CDN or build step required.
   ─────────────────────────────────────────────────────────────────────────── */

/* Layout */
.flex           { display: flex; }
.inline         { display: inline; }
.block          { display: block; }
.grid           { display: grid; }
.hidden         { display: none; }
.relative       { position: relative; }
.absolute       { position: absolute; }
.sticky         { position: sticky; }

/* Flexbox */
.flex-col       { flex-direction: column; }
.flex-wrap      { flex-wrap: wrap; }
.items-center   { align-items: center; }
.justify-between{ justify-content: space-between; }
.justify-center { justify-content: center; }

/* Grid */
.grid-cols-1    { grid-template-columns: repeat(1, minmax(0, 1fr)); }

/* Gap / spacing */
.gap-1          { gap: .25rem; }
.gap-2          { gap: .5rem; }
.gap-4          { gap: 1rem; }
.gap-8          { gap: 2rem; }
.gap-12         { gap: 3rem; }

/* Width / height */
.w-3            { width: .75rem; }
.w-6            { width: 1.5rem; }
.w-10           { width: 2.5rem; }
.w-auto         { width: auto; }
.w-full         { width: 100%; }
.h-3            { height: .75rem; }
.h-6            { height: 1.5rem; }
.h-10           { height: 2.5rem; }
.h-12           { height: 3rem; }
.h-14           { height: 5rem; }
.h-\[88px\]    { height: 88px; }
.min-w-\[180px\]{ min-width: 180px; }
.max-w-7xl      { max-width: 80rem; }

/* Padding */
.p-2            { padding: .5rem; }
.px-4           { padding-left: 1rem; padding-right: 1rem; }
.px-6           { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8           { padding-left: 2rem; padding-right: 2rem; }
.px-10          { padding-left: 2.5rem; padding-right: 2.5rem; }
.py-1\.5        { padding-top: .375rem; padding-bottom: .375rem; }
.py-2           { padding-top: .5rem; padding-bottom: .5rem; }
.py-2\.5        { padding-top: .625rem; padding-bottom: .625rem; }
.py-3           { padding-top: .75rem; padding-bottom: .75rem; }
.py-4           { padding-top: 1rem; padding-bottom: 1rem; }
.pl-4           { padding-left: 1rem; }
.pt-8           { padding-top: 2rem; }
.pt-20          { padding-top: 5rem; }
.pb-10          { padding-bottom: 2.5rem; }

/* Margin */
.mx-auto        { margin-left: auto; margin-right: auto; }
.mt-0\.5        { margin-top: .125rem; }
.mt-2           { margin-top: .5rem; }
.mt-3           { margin-top: .75rem; }
.mt-20          { margin-top: 5rem; }
.mb-3           { margin-bottom: .75rem; }
.mb-4           { margin-bottom: 1rem; }
.mb-6           { margin-bottom: 1.5rem; }

/* Space */
.space-y-0\.5 > * + * { margin-top: .125rem; }
.space-y-1    > * + * { margin-top: .25rem; }
.space-y-3    > * + * { margin-top: .75rem; }

/* Colours — backgrounds */
.bg-white                   { background-color: #ffffff; }
.bg-\[\#061b0e\]            { background-color: #061b0e; }
.bg-surface-container       { background-color: #f5f4f1; }
.bg-surface-container-highest{ background-color: #ede9e4; }

/* Colours — text */
.text-white                 { color: #ffffff; }
.text-primary               { color: #2563eb; }
.text-secondary             { color: #5f5e5e; }
.text-\[\#061b0e\]          { color: #061b0e; }
.text-\[\#1B3022\]          { color: #1b3022; }
.text-\[\#5f5e5e\]          { color: #5f5e5e; }
.text-\[\#7a7977\]          { color: #7a7977; }
.text-on-primary            { color: #ffffff; }

/* Text size */
.text-xs        { font-size: .75rem; line-height: 1rem; }
.text-sm        { font-size: .875rem; line-height: 1.25rem; }
.text-base      { font-size: 1rem; line-height: 1.5rem; }
.text-lg        { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl        { font-size: 1.25rem; line-height: 1.75rem; }
.text-left      { text-align: left; }

/* Font */
.font-bold          { font-weight: 700; }
.font-newsreader    { font-family: 'Newsreader', serif; }
.font-lora          { font-family: 'Lora', Georgia, serif; }
.font-canva         { font-family: 'Canva-Sans', serif; }
.font-body          { font-family: var(--font-sans); }
.not-italic         { font-style: normal; }
.uppercase          { text-transform: uppercase; }
.tracking-widest    { letter-spacing: .1em; }
.leading-relaxed    { line-height: 1.625; }

/* Border */
.border             { border-width: 1px; border-style: solid; }
.border-t           { border-top-width: 1px; border-top-style: solid; }
.border-b           { border-bottom-width: 1px; border-bottom-style: solid; }
.border-\[\#e4e2dd\]{ border-color: #e4e2dd; }
.border-\[\#f0eeea\]{ border-color: #f0eeea; }
.border-\[\#1b3022\]{ border-color: #1b3022; }
.border-outline-variant\/30 { border-color: rgba(180,175,170,.3); }

/* Border radius */
.rounded-full   { border-radius: 9999px; }
.rounded-xl     { border-radius: .75rem; }

/* Shadow */
.shadow-sm      { box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.shadow-lg      { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05); }

/* Z-index */
.z-50           { z-index: 50; }

/* Position helpers */
.top-0          { top: 0; }
.top-full       { top: 100%; }
.left-0         { left: 0; }

/* Opacity */
.opacity-0      { opacity: 0; }
.invisible      { visibility: hidden; }

/* Object */
.object-contain { object-fit: contain; }

/* Overflow */
.overflow-hidden { overflow: hidden; }

/* Transition */
.transition-all     { transition: all .15s ease; }
.transition-colors  { transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
.transition-opacity { transition: opacity .15s ease; }
.transition-transform{ transition: transform .15s ease; }
.duration-200       { transition-duration: .2s; }

/* Hover states */
.hover\:opacity-75:hover    { opacity: .75; }
.hover\:opacity-80:hover    { opacity: .80; }
.hover\:text-primary:hover  { color: #2563eb; }
.hover\:text-\[\#061b0e\]:hover { color: #061b0e; }
.hover\:text-on-primary:hover   { color: #ffffff; }
.hover\:bg-primary:hover        { background-color: #2563eb; }
.hover\:bg-\[\#f5f4f1\]:hover   { background-color: #f5f4f1; }
.hover\:bg-\[\#0d2e18\]:hover   { background-color: #0d2e18; }

/* Active */
.active\:scale-95:active    { transform: scale(.95); }

/* Group hover */
.group:hover .group-hover\:opacity-100  { opacity: 1; }
.group:hover .group-hover\:visible      { visibility: visible; }
.group:hover .group-hover\:rotate-180   { transform: rotate(180deg); }
.group { position: relative; }

/* Last child */
.last\:border-0:last-child  { border-width: 0; }

/* ── ARTICLE PROSE ──────────────────────────────────────────────────
   Scoped to .pg-prose — applied to page_content output in article
   template. Restores paragraph spacing, heading hierarchy, lists,
   blockquotes, and inline elements stripped by CSS resets.
──────────────────────────────────────────────────────────────────── */
.pg-prose {
    font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--text, #1A2118);
    max-width: 72ch;
}

.pg-prose p {
    margin-top: 0;
    margin-bottom: 1.35em;
}

.pg-prose p + p {
    margin-top: 0;
}

.pg-prose h2 {
    font-family: var(--font-display, 'Playfair Display', serif);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--primary, #004D3E);
    margin: 2.25em 0 0.65em;
}

.pg-prose h3 {
    font-family: var(--font-display, 'Playfair Display', serif);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text, #1A2118);
    margin: 2em 0 0.5em;
}

.pg-prose h4 {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 1.75em 0 0.4em;
}

.pg-prose ul,
.pg-prose ol {
    padding-left: 1.5em;
    margin-bottom: 1.35em;
}

.pg-prose ul { list-style: disc; }
.pg-prose ol { list-style: decimal; }

.pg-prose li {
    margin-bottom: 0.4em;
    line-height: 1.7;
}

.pg-prose li + li {
    margin-top: 0.25em;
}

.pg-prose blockquote {
    border-left: 3px solid var(--primary, #004D3E);
    margin: 1.75em 0;
    padding: 0.65em 1.25em;
    background: var(--primary-light, #E8F2EF);
    border-radius: 0 6px 6px 0;
    color: var(--muted, #6B7A6A);
    font-style: italic;
}

.pg-prose blockquote p {
    margin-bottom: 0;
}

.pg-prose strong { font-weight: 600; }
.pg-prose em     { font-style: italic; }

.pg-prose a {
    color: var(--primary, #004D3E);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 0.15s;
}

.pg-prose a:hover {
    color: var(--primary-dark, #003328);
}

.pg-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1.5em 0;
    display: block;
}

.pg-prose figure {
    margin: 1.75em 0;
}

.pg-prose figcaption {
    font-size: 0.82rem;
    color: var(--muted, #6B7A6A);
    margin-top: 0.5em;
    text-align: center;
}

.pg-prose hr {
    border: none;
    border-top: 1px solid var(--border, #E2E8DC);
    margin: 2.5em 0;
}

.pg-prose code {
    font-family: ui-monospace, 'Cascadia Code', monospace;
    font-size: 0.875em;
    background: var(--primary-light, #E8F2EF);
    color: var(--primary-dark, #003328);
    padding: 0.15em 0.4em;
    border-radius: 4px;
}

.pg-prose pre {
    background: #1A2118;
    color: #e2e8dc;
    padding: 1.25em 1.5em;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1.75em 0;
    font-size: 0.875rem;
    line-height: 1.65;
}

.pg-prose pre code {
    background: none;
    color: inherit;
    padding: 0;
    font-size: inherit;
}

/* First paragraph lead style */
.pg-prose > p:first-child {
    font-size: 1.125rem;
    color: var(--muted, #6B7A6A);
    line-height: 1.75;
}

/* Responsive — md breakpoint = 768px */
@media (min-width: 768px) {
    .md\:flex    { display: flex; }
    .md\:block   { display: block; }
    .md\:hidden  { display: none; }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}