/* Pathfinders Keepers — 1:1 rebuild of the Lovable "keepers-shine" source */

:root{
  --radius: 0.25rem;
  --radius-lg: 0.25rem;
  --radius-xl: 0.5rem;

  --background: oklch(0.977 0.008 85);
  --foreground: oklch(0.19 0.012 60);
  --card: oklch(1 0 0);
  --secondary: oklch(0.94 0.014 85);
  --muted-foreground: oklch(0.5 0.015 70);
  --border: oklch(0.89 0.012 80);
  --input: oklch(0.89 0.012 80);

  --ink: oklch(0.16 0.01 60);
  --ink-foreground: oklch(0.97 0.008 85);
  --gold: oklch(0.79 0.155 78);
  --gold-foreground: oklch(0.18 0.012 60);

  --shadow-lift: 0 24px 60px -30px oklch(0.16 0.01 60 / 0.45);
  --maxw: 1152px;

  --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-sans);
  background:var(--background);
  color:var(--foreground);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.02em;
  margin:0;
}
p{margin:0;color:var(--muted-foreground);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}

.container{max-width:var(--maxw);margin:0 auto;padding:0 20px;}
.eyebrow{
  font-family:var(--font-sans);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.text-gold{color:var(--gold);}
.text-muted{color:var(--muted-foreground);}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:700;font-size:.875rem;
  border-radius:999px;
  border:1.5px solid transparent;
  transition:all .18s ease;
}
.btn-gold{background:var(--gold);color:var(--gold-foreground);padding:14px 28px;}
.btn-gold:hover{transform:translateY(-2px);}
.btn-outline-light{border-color:oklch(0.97 0.008 85 / .3);color:var(--ink-foreground);padding:14px 28px;}
.btn-outline-light:hover{background:oklch(0.97 0.008 85 / .1);}
.btn-dark{background:var(--ink);color:var(--ink-foreground);padding:12px 24px;}
.btn-dark:hover{background:var(--gold);color:var(--gold-foreground);}

/* Top utility bar — desktop only */
.topbar{background:var(--ink);color:var(--ink-foreground);display:none;}
@media (min-width:768px){.topbar{display:block;}}
.topbar .container{
  height:40px;display:flex;align-items:center;justify-content:space-between;font-size:.75rem;
}
.topbar-contact{display:flex;align-items:center;gap:24px;}
.topbar-contact a{display:flex;align-items:center;gap:8px;}
.topbar-contact a:hover{color:var(--gold);}
.topbar-contact svg{width:14px;height:14px;}

/* Nav */
.navbar{
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid oklch(0.89 0.012 80 / .6);
  background:oklch(0.977 0.008 85 / .85);
  backdrop-filter:blur(8px);
}
.navbar .container{height:64px;display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:8px;}
.brand img{height:36px;width:auto;}
.brand-text{font-family:var(--font-display);font-size:.85rem;font-weight:800;text-transform:uppercase;letter-spacing:.18em;}
.nav-links{display:none;align-items:center;gap:28px;}
@media (min-width:768px){.nav-links{display:flex;}}
.nav-links a{font-size:.9rem;font-weight:600;color:var(--muted-foreground);transition:color .15s ease;}
.nav-links a:hover, .nav-links a.active{color:var(--foreground);}
.nav-toggle{display:block;background:none;border:none;color:var(--foreground);}
@media (min-width:768px){.nav-toggle{display:none;}}
.nav-toggle svg{width:24px;height:24px;}
.mobile-nav{border-top:1px solid var(--border);background:var(--background);padding:16px 20px;display:none;}
.mobile-nav.open{display:block;}
.mobile-nav a{
  display:block;padding:12px 0;border-bottom:1px solid oklch(0.89 0.012 80 / .6);
  font-size:.9rem;font-weight:600;
}
.mobile-nav .btn-dark{display:block;text-align:center;margin-top:16px;padding:12px 20px;}
@media (min-width:768px){.mobile-nav{display:none !important;}}

/* Hero */
.hero{position:relative;overflow:hidden;background:var(--ink);color:var(--ink-foreground);}
.hero img.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45;}
.hero .container{position:relative;padding:96px 20px;}
@media (min-width:768px){.hero .container{padding:144px 20px;}}
.hero-inner{max-width:720px;}
.hero h1{font-size:2.75rem;line-height:.95;margin-top:20px;}
@media (min-width:768px){.hero h1{font-size:4.5rem;}}
.hero p.lead{margin-top:24px;max-width:520px;font-size:1.125rem;color:oklch(0.97 0.008 85 / .8);}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px;}

/* Page banner (sub-pages) */
.page-hero{background:var(--ink);color:var(--ink-foreground);}
.page-hero .container{padding:64px 20px 56px;}
@media (min-width:768px){.page-hero .container{padding:88px 20px 72px;}}
.page-hero h1{font-size:2.25rem;margin-top:16px;color:var(--ink-foreground);}
@media (min-width:768px){.page-hero h1{font-size:3.25rem;}}
.page-hero p.lead{margin-top:20px;max-width:560px;font-size:1.05rem;color:oklch(0.97 0.008 85 / .78);}
.crumb{font-size:.8rem;color:oklch(0.97 0.008 85 / .55);}
.crumb a:hover{color:var(--gold);}

/* Teaser rows (home page) */
.teaser-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.teaser-link{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.9rem;color:var(--foreground);}
.teaser-link:hover{color:var(--gold);}
.teaser-link svg{width:16px;height:16px;}
.teaser-link.on-dark{color:var(--ink-foreground);}
.teaser-link.on-dark:hover{color:var(--gold);}

.cta-band{background:var(--ink);color:var(--ink-foreground);border-radius:var(--radius-lg);padding:56px;text-align:center;}
.cta-band h2{color:var(--ink-foreground);}
.cta-band p{color:oklch(0.97 0.008 85 / .75);margin-top:12px;}
.cta-band .btn{margin-top:24px;}

/* Expo card */
.expo-wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;}
.expo-card{
  margin-top:-48px;position:relative;
  display:grid;grid-template-columns:1fr;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow-lift);
  gap:1px;background:var(--border);
}
@media (min-width:768px){.expo-card{grid-template-columns:repeat(4,1fr);}}
.expo-cell{background:var(--card);padding:28px;}
.expo-cell.gold{background:var(--gold);color:var(--gold-foreground);}
.expo-cell h2{font-size:1.5rem;margin-top:8px;}
.expo-cell .val{
  margin-top:8px;display:flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-weight:800;font-size:1.125rem;color:var(--foreground);
}
.expo-cell .val svg{width:16px;height:16px;color:var(--gold);}
.expo-cell.last{display:flex;flex-direction:column;justify-content:space-between;}
.expo-cell .book-link{
  margin-top:16px;display:inline-flex;align-items:center;gap:4px;
  font-size:.875rem;font-weight:700;
}
.expo-cell .book-link:hover{color:var(--gold);}
.expo-cell .book-link svg{width:16px;height:16px;}

/* Sections */
.section{padding:96px 0;}
.section h2{font-size:2.25rem;line-height:1.15;margin-top:16px;}
@media (min-width:768px){.section h2{font-size:3rem;}}

/* About */
.about-head{display:grid;gap:32px;grid-template-columns:1fr;}
@media (min-width:768px){.about-head{grid-template-columns:1fr 1fr;gap:56px;}}
.about-head .lede{max-width:32rem;}
.about-head .lede p{font-size:1.125rem;margin-bottom:20px;}
.about-head .lede p:last-child{margin-bottom:0;}

.value-grid{display:grid;gap:24px;margin-top:64px;grid-template-columns:1fr;}
@media (min-width:768px){.value-grid{grid-template-columns:repeat(3,1fr);}}
.value-card{border:1px solid var(--border);background:var(--card);border-radius:var(--radius-lg);padding:32px;}
.value-card svg{width:24px;height:24px;color:var(--gold);}
.value-card h3{margin-top:20px;font-size:1.25rem;}
.value-card p{margin-top:12px;font-size:.875rem;line-height:1.7;}

/* Programmes (dark) */
.programmes{background:var(--ink);color:var(--ink-foreground);}
.programmes h2{max-width:42rem;color:var(--ink-foreground);}
.programme-grid{
  margin-top:56px;display:grid;gap:1px;
  background:oklch(0.97 0.008 85 / .15);
  grid-template-columns:1fr;
}
@media (min-width:768px){.programme-grid{grid-template-columns:1fr 1fr;}}
.programme-cell{background:var(--ink);padding:36px;}
.programme-cell .num{font-family:var(--font-display);font-weight:800;font-size:.875rem;color:var(--gold);}
.programme-cell h3{margin-top:16px;font-size:1.5rem;color:var(--ink-foreground);}
.programme-cell p{margin-top:12px;font-size:.875rem;line-height:1.7;color:oklch(0.97 0.008 85 / .7);}

/* Impact */
.impact-grid{display:grid;gap:48px;grid-template-columns:1fr;align-items:center;}
@media (min-width:768px){.impact-grid{grid-template-columns:1fr 1.1fr;}}
.impact-photos{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.impact-photos img{width:100%;height:100%;border-radius:var(--radius-lg);object-fit:cover;aspect-ratio:900/1100;}
.impact-photos img:last-child{margin-top:40px;}
.impact-text p.lede{margin-top:20px;}
.story-list{margin-top:32px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.story-row{
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  padding:20px 0;border-bottom:1px solid var(--border);
}
.story-row:last-child{border-bottom:none;}
.story-row h3{font-size:1.125rem;font-weight:800;font-family:var(--font-display);}
.story-row:hover h3{color:var(--gold);}
.story-row p{margin-top:4px;font-size:.875rem;}
.story-row svg{width:20px;height:20px;color:var(--muted-foreground);flex-shrink:0;margin-top:4px;transition:all .18s ease;}
.story-row:hover svg{color:var(--gold);transform:translateY(-2px);}

/* Partners */
.partners-section{background:var(--secondary);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:80px 0;}
.partners-section h2{font-size:1.875rem;margin-top:16px;}
@media (min-width:768px){.partners-section h2{font-size:2.25rem;}}
.partner-pills{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px;}
.partner-pill{
  border:1px solid var(--border);background:var(--card);border-radius:999px;
  padding:10px 20px;font-family:var(--font-display);font-weight:700;font-size:.875rem;
}
.sponsor-card{
  margin-top:48px;max-width:42rem;border:1px solid var(--border);background:var(--card);
  border-radius:var(--radius-lg);padding:32px;
}
.sponsor-card h3{font-size:1.25rem;}
.sponsor-card p{margin-top:12px;font-size:.875rem;line-height:1.7;}
.sponsor-card .btn{margin-top:24px;}

/* Join */
.join-grid{display:grid;gap:48px;grid-template-columns:1fr;}
@media (min-width:768px){.join-grid{grid-template-columns:1fr 1fr;}}
.join-text p.lede{margin-top:20px;max-width:28rem;}
.join-contacts{margin-top:32px;display:flex;flex-direction:column;gap:12px;font-size:.9rem;font-weight:600;}
.join-contacts a{display:flex;align-items:center;gap:12px;}
.join-contacts a:hover{color:var(--gold);}
.join-contacts svg{width:16px;height:16px;color:var(--gold);}

.form-card{border:1px solid var(--border);background:var(--card);border-radius:var(--radius-lg);padding:32px;}
.form-card label{
  display:block;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;
  color:var(--muted-foreground);margin-top:20px;
}
.form-card label:first-child{margin-top:0;}
.form-card input,.form-card textarea{
  margin-top:8px;width:100%;border-radius:6px;border:1px solid var(--input);background:var(--background);
  padding:12px 16px;font-size:.9rem;font-weight:400;text-transform:none;letter-spacing:normal;
  font-family:var(--font-sans);color:var(--foreground);
}
.form-card input:focus,.form-card textarea:focus{outline:none;border-color:var(--gold);}
.form-card textarea{resize:vertical;min-height:100px;}
.form-card button{width:100%;justify-content:center;margin-top:24px;padding:14px 24px;}
.form-note{display:none;margin-top:12px;font-size:.85rem;color:var(--gold);}

/* Footer */
footer{border-top:1px solid var(--border);background:var(--ink);color:var(--ink-foreground);padding:48px 0;}
footer .container{display:flex;flex-direction:column;gap:24px;align-items:flex-start;}
@media (min-width:768px){footer .container{flex-direction:row;align-items:center;justify-content:space-between;}}
.foot-brand{display:flex;align-items:center;gap:12px;}
.foot-brand img{height:36px;width:auto;filter:invert(1);}
.foot-brand span{font-family:var(--font-display);font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.18em;}
.foot-copy{font-size:.75rem;color:oklch(0.97 0.008 85 / .6);}

/* ===== Motion ===== */
@media (prefers-reduced-motion: no-preference){

  /* Scroll-triggered reveal, applied via JS (main.js). The stagger delay lives in its
     own higher-specificity rule so it survives on elements below that also declare
     their own hover `transition` shorthand (which would otherwise wipe it out). */
  .reveal{
    opacity:0;transform:translateY(28px);
    transition:opacity .6s cubic-bezier(.16,.8,.24,1), transform .5s cubic-bezier(.16,.8,.24,1);
  }
  .reveal:not(.in-view){transition-delay:var(--reveal-delay, 0ms);}
  .reveal.in-view{opacity:1;transform:translateY(0);}

  /* Hero + page-hero entrance, plays on load (no scroll needed) */
  .hero-inner > *, .page-hero .container > *{
    opacity:0;transform:translateY(20px);
    animation:reveal-up .8s cubic-bezier(.16,.8,.24,1) forwards;
  }
  .hero-inner > *:nth-child(1), .page-hero .container > *:nth-child(1){animation-delay:.05s;}
  .hero-inner > *:nth-child(2), .page-hero .container > *:nth-child(2){animation-delay:.16s;}
  .hero-inner > *:nth-child(3), .page-hero .container > *:nth-child(3){animation-delay:.28s;}
  .hero-inner > *:nth-child(4), .page-hero .container > *:nth-child(4){animation-delay:.4s;}
  @keyframes reveal-up{to{opacity:1;transform:translateY(0);}}

  /* Sticky nav gains a shadow once the page scrolls (toggled in main.js) */
  .navbar{transition:box-shadow .3s ease;}
  .navbar.scrolled{box-shadow:0 8px 24px -18px oklch(0.16 0.01 60 / .45);}

  /* Card lift on hover — includes opacity so the reveal fade above still works
     once JS adds .reveal to these (they'd otherwise lose it to this shorthand). */
  .value-card, .sponsor-card, .programme-cell, .expo-cell{
    transition:opacity .6s cubic-bezier(.16,.8,.24,1), transform .4s cubic-bezier(.16,.8,.24,1), box-shadow .35s ease;
  }
  .value-card:hover, .sponsor-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);}
  .programme-cell:hover{transform:translateY(-4px);}
  .value-card svg{transition:transform .35s cubic-bezier(.16,.8,.24,1);}
  .value-card:hover svg{transform:scale(1.15) rotate(-4deg);}

  /* Partner pill pop */
  .partner-pill{
    transition:opacity .6s cubic-bezier(.16,.8,.24,1), transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
  }
  .partner-pill:hover{transform:translateY(-3px);border-color:var(--gold);background:var(--gold);color:var(--gold-foreground);}

  /* Buttons */
  .btn-gold:hover{transform:translateY(-3px);box-shadow:0 14px 28px -14px oklch(0.79 0.155 78 / .65);}
  .btn-dark, .btn-outline-light{transition:all .22s cubic-bezier(.16,.8,.24,1);}
  .btn-dark:hover{transform:translateY(-2px);}

  /* Mobile nav links cascade in when opened */
  .mobile-nav a{opacity:0;transform:translateX(-10px);}
  .mobile-nav.open a{animation:nav-item-in .4s cubic-bezier(.16,.8,.24,1) forwards;}
  .mobile-nav.open a:nth-child(1){animation-delay:.03s;}
  .mobile-nav.open a:nth-child(2){animation-delay:.08s;}
  .mobile-nav.open a:nth-child(3){animation-delay:.13s;}
  .mobile-nav.open a:nth-child(4){animation-delay:.18s;}
  .mobile-nav.open a:nth-child(5){animation-delay:.23s;}
  .mobile-nav.open a:nth-child(6){animation-delay:.28s;}
  @keyframes nav-item-in{to{opacity:1;transform:translateX(0);}}
}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important;transform:none !important;}
}

/* ===== Marketplace app (register / directory / dashboard / admin) ===== */

.flash{border-radius:8px;padding:14px 18px;font-size:.9rem;font-weight:600;margin-bottom:24px;}
.flash-success{background:oklch(0.94 0.09 145 / .5);color:oklch(0.32 0.09 145);border:1px solid oklch(0.7 0.12 145 / .4);}
.flash-error{background:oklch(0.94 0.08 25 / .5);color:oklch(0.35 0.12 25);border:1px solid oklch(0.7 0.15 25 / .4);}

.badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 14px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;}
.badge-green{background:oklch(0.94 0.09 145 / .6);color:oklch(0.32 0.1 145);}
.badge-amber{background:oklch(0.94 0.09 85 / .7);color:oklch(0.38 0.12 70);}
.badge-red{background:oklch(0.94 0.08 25 / .6);color:oklch(0.4 0.14 25);}
.badge-gray{background:var(--secondary);color:var(--muted-foreground);}
.compliance-note{margin-top:8px;font-size:.75rem;color:var(--muted-foreground);}

.field-grid{display:grid;gap:20px;grid-template-columns:1fr;}
@media (min-width:700px){.field-grid.cols-2{grid-template-columns:1fr 1fr;}}
.field-grid label{display:block;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-foreground);}
.field-grid input, .field-grid select, .field-grid textarea{
  margin-top:8px;width:100%;border-radius:6px;border:1px solid var(--input);background:var(--background);
  padding:12px 16px;font-size:.9rem;font-family:var(--font-sans);color:var(--foreground);
}
.field-grid input:focus, .field-grid select:focus, .field-grid textarea:focus{outline:none;border-color:var(--gold);}
.field-grid textarea{resize:vertical;min-height:100px;}
.field-hint{margin-top:6px;font-size:.75rem;color:var(--muted-foreground);}
.field-section{margin-top:40px;padding-top:32px;border-top:1px solid var(--border);}
.field-section h3{font-size:1.1rem;}
.field-section > p{margin-top:6px;font-size:.85rem;}

/* Directory */
.directory-filters{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;margin-top:32px;}
.directory-results{margin-top:32px;display:grid;gap:20px;grid-template-columns:1fr;}
@media (min-width:700px){.directory-results{grid-template-columns:1fr 1fr;}}
.directory-card{border:1px solid var(--border);background:var(--card);border-radius:var(--radius-lg);padding:24px;display:flex;flex-direction:column;gap:10px;}
.directory-card h3{font-size:1.15rem;}
.directory-card .meta{font-size:.8rem;color:var(--muted-foreground);}
.directory-card .distance{font-size:.75rem;color:var(--gold);font-weight:700;}
.empty-state{margin-top:32px;padding:48px;text-align:center;border:1px dashed var(--border);border-radius:var(--radius-lg);color:var(--muted-foreground);}

/* Dashboard / admin tables */
.dash-grid{display:grid;gap:32px;grid-template-columns:1fr;margin-top:32px;}
@media (min-width:900px){.dash-grid{grid-template-columns:280px 1fr;}}
.dash-side{border:1px solid var(--border);background:var(--card);border-radius:var(--radius-lg);padding:24px;align-self:start;}
.dash-side h2{font-size:1.1rem;}
.doc-list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;}
.doc-list li{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;border-bottom:1px solid var(--border);padding-bottom:8px;}

table.data-table{width:100%;border-collapse:collapse;margin-top:20px;font-size:.85rem;}
table.data-table th, table.data-table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--border);}
table.data-table th{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground);}
table.data-table tr:hover td{background:var(--secondary);}

.stars{color:var(--gold);letter-spacing:2px;}