/* =========================================================
   Pathways Association of Nebraska – Brand-matched styles.css
   Drop this in as a full replacement.
   Palette tuned to the logo: deep teal, sea teal, warm gold.
   ========================================================= */

/* ====== Custom Font: Houschka Pro Medium ====== */
@font-face {
  font-family: 'Houschka Pro';
  src: url('assets/fonts/Houschka_Pro_Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ========== (A) BRAND THEME (tokens + components) ========== */

:root{
  /* Core brand from the new logo */
  --brand-teal-800:#2B4958;   /* dark blue-slate used in the wordmark (headlines/strong) */
  --brand-teal-700:#284654;   /* primary / buttons */
  --brand-teal-600:#355B66;   /* hover on dark */
  --brand-teal-500:#369A9E;   /* teal accent (links/buttons hover) */
  --brand-teal-300:#7CBDBF;   /* soft teal tint */
  --brand-gold-500:#F6B235;   /* arch gold */
  --brand-gold-600:#C9912B;   /* gold hover/active */

  /* Surfaces & text */
  --surface-0:#FFFFFF;
  --surface-25:#FCFAF6;
  --surface-50:#F7F3EC;
  --surface-100:#ECF2F1;
  --text-900:#2C4754;         /* body text tuned to wordmark */
  --text-700:#47606A;         /* secondary */
  --border-200:#D0DADD;
  --focus: color-mix(in oklab, var(--brand-gold-500) 35%, transparent);

  --shadow:0 10px 18px rgba(43,73,88,.12);
  --shadow-md:0 16px 28px rgba(43,73,88,.16);
}


*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body {
  margin: 0;
  background: var(--surface-50);
  color: var(--text-900);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  font-weight:500;
  font-family: 'Houschka Pro', system-ui, -apple-system, 'Segoe UI', Roboto, Inter, 'Helvetica Neue', Arial, sans-serif;
}
img{max-width:100%;display:block}

/* Links: teal with gold underline on hover for a subtle brand cue */
a{color:var(--brand-teal-700);text-decoration:none}
a:hover{
  color:var(--brand-teal-600);
  text-decoration:underline;
  text-decoration-color:var(--brand-gold-500);
  text-underline-offset:2px;
}

/* Layout */
.container{max-width:1100px;margin-inline:auto;padding-inline:1rem}
.section{padding:4rem 0}

/* Cards & page chrome */
.card{
  background:var(--surface-0);
  border:1px solid var(--border-200);
  border-radius:16px;
  padding:1.25rem;
  box-shadow:var(--shadow);
}

/* Header: gentle translucency, thin bottom rule */
.site-header{
  position:sticky;top:0;z-index:100;backdrop-filter:blur(8px);
  background: color-mix(in oklab, var(--surface-0) 88%, transparent);
  border-bottom:1px solid var(--border-200);
}

/* Brand lockup text colors align to logo dark teal */
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;color:var(--brand-teal-700)}
.brand-badge{
  width:36px;height:36px;border-radius:12px;display:inline-grid;place-items:center;
  background:var(--brand-teal-700);color:#fff;font-weight:800;
  box-shadow:0 4px 10px rgba(46,106,110,.2);
}

/* Nav pills echo sea-teal tint when active */
.nav{display:flex;gap:.25rem;align-items:center}
.nav a{
  padding:.55rem .8rem;border-radius:10px;color:var(--text-700);
  transition:background .15s,color .15s,box-shadow .15s;
}
.nav a:hover{background:var(--surface-100);color:var(--brand-teal-700)}
.nav a[aria-current="page"],.nav a.active{
  color:var(--brand-teal-700);
  background:linear-gradient(to bottom, var(--surface-100), var(--surface-0));
  box-shadow:inset 0 0 0 1px var(--border-200);
}

/* Type scale */
h1,h2,h3{line-height:1.25;color:var(--brand-teal-800);margin:0 0 .5rem}
h1{font-size:clamp(1.9rem,1.1rem + 2.4vw,3.1rem);font-weight:900;letter-spacing:-.01em}
h2{font-size:clamp(1.35rem,1rem + 1.2vw,1.9rem);font-weight:800;margin-top:1.25rem}
h3{font-size:1.125rem;font-weight:700;margin-top:1rem}
p{margin:0 0 1rem}

/* Buttons: primary = deep teal, accent = gold (from arch) */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.65rem 1rem;border-radius:12px;border:1px solid transparent;
  font-weight:700;cursor:pointer;transition:.15s;box-shadow:var(--shadow);text-decoration:none
}
.btn:focus-visible{outline:none;box-shadow:0 0 0 4px var(--focus)}
.btn-primary{background:var(--brand-teal-700);color:#fff}
.btn-primary:hover{background:var(--brand-teal-600)}
.btn-ghost{background:transparent;border-color:var(--border-200);color:var(--brand-teal-700)}
.btn-ghost:hover{background:var(--surface-100)}
.btn-accent{background:var(--brand-gold-500);color:#1F3336;border-color:color-mix(in oklab, var(--brand-gold-600) 35%, transparent)}
.btn-accent:hover{background:var(--brand-gold-600);color:#142528}

/* Badges & chips */
.badge{
  display:inline-block;padding:.25rem .5rem;border-radius:8px;
  background:var(--surface-100);color:var(--text-700);border:1px solid var(--border-200)
}

/* Forms */
input,textarea,select{
  width:100%;padding:.65rem .75rem;border-radius:12px;border:1px solid var(--border-200);
  background:var(--surface-0);color:var(--text-900);outline:none;transition:border-color .12s,box-shadow .12s;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--brand-teal-500);
  box-shadow:0 0 0 4px var(--focus)
}
label{font-size:.9rem;font-weight:700;color:var(--text-700)}

/* Section dividers with a faint gold thread */
.hr-gold{height:1px;border:0;background:linear-gradient(90deg,transparent, var(--brand-gold-500), transparent);opacity:.6}

/* Footer */
.site-footer{
  background:var(--surface-25);
  border-top:1px solid var(--border-200);
  color:var(--text-700)
}
.site-footer .muted{color:var(--text-700);font-size:.9rem}

/* ========== (B) LIGHT UTILITY SHIM (kept so your HTML still works) ========== */
/* Preflight-ish */
h1,h2,h3,h4,h5,h6{font-weight:inherit}
button,input,textarea,select{font:inherit}

/* Color utilities mapped to theme */
.text-slate-700{color:var(--text-700)!important}
.text-slate-600{color:#5C757B!important}
.text-slate-500{color:#778D92!important}
.text-indigo-600{color:var(--brand-teal-700)!important}   /* mapped from 'indigo' */
.text-white{color:#fff!important}
.text-center{text-align:center!important}
.text-slate-200{color:#D7E1E0!important}

.bg-white{background:#fff!important}
.bg-slate-50{background:var(--surface-100)!important}
.bg-indigo-600{background:var(--brand-teal-700)!important}
.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--surface-100),var(--surface-0))}

.hover\:underline:hover{text-decoration:underline!important}
.hover\:bg-slate-100:hover{background:var(--surface-100)!important}
.hover\:shadow-md:hover{box-shadow:var(--shadow-md)!important}

/* Borders & Radius */
.border{border:1px solid var(--border-200)!important}
.border-t{border-top:1px solid var(--border-200)!important}
.rounded-xl{border-radius:12px!important}
.rounded-2xl{border-radius:16px!important}

/* Shadows */
.shadow-sm{box-shadow:0 6px 12px rgba(38,76,80,.10)!important}
.shadow{box-shadow:var(--shadow)!important}
.shadow-md{box-shadow:var(--shadow-md)!important}

/* Typography sizes & weights */
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-5xl{font-size:3rem;line-height:1}
.font-medium{font-weight:500}
.font-semibold{font-weight:700}
.font-bold{font-weight:800}
.font-black{font-weight:900}

/* Spacing */
.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}
.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}

/* Layout / Flex / Grid */
.flex{display:flex}.inline-flex{display:inline-flex}
.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.grid{display:grid}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-6{gap:1.5rem}
.block{display:block}
.hidden{display:none}
.w-full{width:100%}
.sticky{position:sticky}.top-0{top:0}
.z-40{z-index:40}

/* Responsive: md: (min-width: 768px) */
@media (min-width:768px){
  .md\\:flex{display:flex}
  .md\\:hidden{display:none}
  .md\\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .md\\:col-span-2{grid-column:span 2 / span 2}
  .md\\:py-24{padding-top:6rem;padding-bottom:6rem}
}

/* Misc helpers */
.not-italic{font-style:normal}
.address{font-style:normal}
.header-border{border-bottom:1px solid var(--border-200)}
.link{color:var(--brand-teal-700)}
.link:hover{color:var(--brand-teal-600);text-decoration:underline;text-decoration-color:var(--brand-gold-500);text-underline-offset:2px}

/* Optional: a subtle hero backdrop that echoes the logo colors */
.hero-ribbon{
  background:
    radial-gradient(1200px 300px at -10% -50%, color-mix(in oklab, var(--brand-gold-500) 18%, transparent), transparent),
    radial-gradient(1200px 300px at 110% -60%, color-mix(in oklab, var(--brand-teal-300) 18%, transparent), transparent);
}

/* === Logo in banner (header) === */
:root{
  /* tweak this to scale the logo globally */
  --logo-h: 40px;
}

/* Brand lockup in the header */
.brand{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-weight:800;
  color:var(--brand-teal-700);
  text-decoration:none;
}

/* If you were using the old square badge, hide it when an image logo exists */
.brand-badge{ display:none; }

/* Actual logo image */
.brand-logo{
  height:var(--logo-h);
  width:auto;
  display:block;
  inline-size:auto;               /* avoid shrinking */
  object-fit:contain;
}

/* Keep the name from wrapping awkwardly on tiny screens */
.brand-name{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Tighten logo on very small screens */
@media (max-width:480px){
  :root{ --logo-h: 34px; }
}

/* Optional: if you add a darker header later, this keeps contrast tidy */
.site-header .brand:hover{ color:var(--brand-teal-600); }

/* Optional: give the banner a faint ribbon that echoes brand colors */
.site-header.hero-with-ribbon{
  background:
    radial-gradient(900px 240px at -10% -80%, color-mix(in oklab, var(--brand-gold-500) 14%, transparent), transparent),
    radial-gradient(900px 240px at 110% -80%, color-mix(in oklab, var(--brand-teal-300) 14%, transparent), transparent),
    color-mix(in oklab, var(--surface-0) 88%, transparent);
}
/* ===== Full-width logo banner setup ===== */
.brand-full {
  height: 72px;                /* increases visibility */
  width: auto;
  display: block;
  object-fit: contain;
  margin: 0;
}

/* Center it vertically in the header */
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* Responsive scaling for smaller viewports */
@media (max-width: 1024px) {
  .brand-full {
    height: 64px;
  }
}

@media (max-width: 768px) {
  .brand-full {
    height: 56px;
  }
}

@media (max-width: 480px) {
  .brand-full {
    height: 48px;
  }
}
.site-footer {
  background-color: #f8f8f8;
  padding: 20px 0;
  text-align: center;
  font-size: 0.9rem;
  color: #555;
}

.site-footer .credit {
  margin-top: 5px;
  font-size: 0.8rem;
  color: #888;
}

.site-footer .credit a {
  color: #888;
  text-decoration: none;
}

.site-footer .credit a:hover {
  color: #555;
  text-decoration: underline;
}
/* ========== Secondary Logo ========== */
.stacked-card {
  display: flex;
  align-items: center;
  gap: 2rem;                 /* space between logo and text */
  flex-wrap: wrap;           /* allows stacking on small screens */
}

.stacked-logo {
  height: 180px;             /* adjust this for logo size */
  width: auto;
  flex-shrink: 0;            /* prevents it from shrinking */
  object-fit: contain;
}

.stacked-text {
  flex: 1;                   /* text takes remaining width */
  min-width: 250px;
}

@media (max-width: 768px) {
  .stacked-card {
    flex-direction: column;  /* stack on mobile */
    text-align: center;
    align-items: center;
  }

  .stacked-logo {
    margin-bottom: 1rem;
    height: 120px; /* smaller on mobile */
  }

  .stacked-text {
    text-align: center;
    min-width: auto;
    width: 100%;
  }
}