
:root{--navy:#0d315b;--navy-deep:#082846;--blue:#1972b8;--ink:#16243c;--muted:#63738a;--line:#d8e3ee;--soft:#f3f8fd}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--soft);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.65}
.site-header{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line)}
.site-nav{max-width:1180px;margin:auto;padding:12px 24px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);font-size:1.18rem;font-weight:900;white-space:nowrap}
.brand-mark{width:58px;height:58px;border-radius:16px;background:linear-gradient(145deg,#1978bd,#0e5fa8);color:#fff;display:grid;place-items:center;font-size:.9rem;font-weight:900;letter-spacing:.04em;box-shadow:0 8px 18px rgba(20,105,175,.18)}
.nav-links{display:flex;gap:24px;margin-left:auto;align-items:center}.nav-links a{color:#35445d;text-decoration:none;font-weight:750;white-space:nowrap}.nav-links a:hover{color:var(--blue)}
.hero{color:#fff;background:linear-gradient(90deg,rgba(6,39,75,.91),rgba(8,49,91,.79),rgba(7,42,79,.67)),url('../fair-hero.jpg') center center/cover no-repeat}
.hero-inner{max-width:1180px;margin:auto;padding:62px 24px 66px}.eyebrow{font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:#d9eaff}
.hero h1{font-size:clamp(3rem,6vw,5rem);line-height:1;letter-spacing:-.04em;margin:.18em 0 .24em}.hero p{max-width:820px;font-size:clamp(1.05rem,2vw,1.35rem);color:rgba(255,255,255,.90)}
.legal-shell{max-width:1080px;margin:-28px auto 0;padding:0 24px 64px;position:relative}.legal-card{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 18px 46px rgba(21,49,82,.09);padding:38px 44px}
.legal-card h1:first-child{display:none}.legal-card h2{color:var(--navy);margin-top:1.6em;line-height:1.2}.legal-card h3{color:var(--navy)}.legal-card p,.legal-card li{color:#43536a}.legal-card a{color:var(--blue)}
.site-footer{background:linear-gradient(135deg,var(--navy),var(--navy-deep));color:#fff}.footer-inner{max-width:1180px;margin:auto;padding:30px 24px;display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap}.footer-brand{display:flex;gap:14px;align-items:center}.footer-links{display:flex;gap:18px;flex-wrap:wrap;align-items:center}.footer-links a{color:#fff;text-decoration:none;opacity:.9}.footer-links a:hover{text-decoration:underline;opacity:1}
@media(max-width:820px){.site-nav{flex-wrap:wrap;padding:10px 16px}.nav-links{order:3;width:100%;margin-left:0;overflow:auto;gap:14px}.hero{background-position:62% center}.hero-inner{padding:48px 18px 54px}.legal-shell{padding-left:16px;padding-right:16px}.legal-card{padding:28px 22px}}

.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;padding:10px 14px;background:#fff;color:#0f2f54;border:2px solid #0f2f54;border-radius:10px;z-index:99999}
:focus-visible{outline:3px solid #1f5f9d;outline-offset:3px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

.nav-dropdown{position:relative}.nav-drop-toggle{border:0;background:transparent;font:inherit;font-weight:800;color:inherit;cursor:pointer;padding:8px}.nav-drop-menu{display:none;position:absolute;right:0;top:100%;min-width:210px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:7px;box-shadow:0 14px 34px rgba(15,47,84,.16);z-index:999}.nav-dropdown.open .nav-drop-menu{display:block}.nav-drop-menu a,.nav-drop-menu button{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--ink);text-decoration:none;padding:10px;border-radius:8px;font:inherit;font-weight:700;cursor:pointer}.nav-drop-menu a:hover,.nav-drop-menu button:hover{background:#f1f5f9}.nav-user-name{padding:8px 10px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}@media(max-width:900px){.nav-dropdown{width:100%}.nav-drop-toggle{width:100%;text-align:left}.nav-drop-menu{position:static;box-shadow:none;border:0;border-left:2px solid var(--line);border-radius:0;margin-left:8px}}
/* v74 — wider desktop layout */
:root{
  --desktop-max:1640px;
  --desktop-pad:clamp(20px,2.25vw,44px);
}

/* Header and footer use the same wider canvas */
.site-header{
  padding-left:max(var(--desktop-pad),calc((100% - var(--desktop-max))/2));
  padding-right:max(var(--desktop-pad),calc((100% - var(--desktop-max))/2));
}
footer{
  max-width:var(--desktop-max);
  padding-left:var(--desktop-pad);
  padding-right:var(--desktop-pad);
}

/* Main homepage sections */
.hero,
.section{
  max-width:var(--desktop-max);
  padding-left:var(--desktop-pad);
  padding-right:var(--desktop-pad);
}
.section.alt{
  padding-left:max(var(--desktop-pad),calc((100% - var(--desktop-max) + (var(--desktop-pad) * 2))/2));
  padding-right:max(var(--desktop-pad),calc((100% - var(--desktop-max) + (var(--desktop-pad) * 2))/2));
}

/* Dedicated page title/content wrappers */
.container{
  max-width:var(--desktop-max);
  padding-left:var(--desktop-pad);
  padding-right:var(--desktop-pad);
}
.dedicated-main{
  width:100%;
  max-width:none;
}
.dedicated-main > .section{
  max-width:var(--desktop-max);
}

/* Resource page uses its own wrapper */
.resource-wrap{
  width:min(calc(100% - (var(--desktop-pad) * 2)),var(--desktop-max));
  max-width:var(--desktop-max);
}

/* Give desktop grids room to breathe */
@media(min-width:1180px){
  .hero{
    grid-template-columns:minmax(0,1.35fr) minmax(360px,.75fr);
    gap:clamp(44px,4vw,78px);
  }
  .hero-text{
    max-width:850px;
  }
  .principles-grid,
  .ideas-grid,
  .experience-grid,
  .resource-grid,
  .admin-grid,
  .analytics-grid{
    width:100%;
  }
  .admin-users-table-wrap,
  .table-wrap{
    width:100%;
  }
}

/* On very large monitors, use even more of the screen */
@media(min-width:1800px){
  :root{--desktop-max:1760px}
}

/* Keep comfortable mobile/tablet gutters */
@media(max-width:900px){
  :root{--desktop-pad:18px}
}
@media(max-width:600px){
  :root{--desktop-pad:14px}
}


/* v76 — consistent fairground header on all interior pages */
.page-titlebar,
body > .hero,
body > section.hero,
.page-hero{
  max-width:none!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  min-height:300px!important;
  display:flex!important;
  align-items:center!important;
  color:#fff!important;
  background:
    linear-gradient(90deg,rgba(6,39,75,.91) 0%,rgba(8,49,91,.82) 47%,rgba(7,42,79,.70) 100%),
    url('../fair-hero.jpg') center center/cover no-repeat!important;
}
.page-titlebar > .container,
body > .hero > .hero-inner,
body > section.hero > .hero-inner,
.page-hero > .hero-inner{
  width:min(calc(100% - (var(--desktop-pad,24px) * 2)),var(--desktop-max,1640px))!important;
  max-width:var(--desktop-max,1640px)!important;
  margin:0 auto!important;
  padding:54px 0 58px!important;
}
.page-titlebar .eyebrow,
body > .hero .eyebrow,
.page-hero .eyebrow{
  color:#d9eaff!important;
}
.page-titlebar h1,
body > .hero h1,
.page-hero h1{
  color:#fff!important;
  margin:.18em 0 .2em!important;
  font-size:clamp(2.6rem,5vw,4.7rem)!important;
  line-height:1!important;
  letter-spacing:-.035em!important;
  max-width:1000px!important;
}
.page-titlebar p,
body > .hero p,
.page-hero p{
  color:rgba(255,255,255,.90)!important;
  max-width:900px!important;
  font-size:clamp(1rem,1.5vw,1.22rem)!important;
}
.page-titlebar .page-back{
  display:inline-block!important;
  margin-top:18px!important;
  color:#fff!important;
  font-weight:800!important;
  text-decoration:none!important;
}
.page-titlebar .page-back:hover{text-decoration:underline!important}

/* Prevent older dedicated-page rules from hiding the visible page header. */
body[data-page="resources"] .page-titlebar,
body[data-page="ideas"] .page-titlebar,
body[data-page="experiences"] .page-titlebar{
  display:flex!important;
}

/* Legal pages retain a compact, readable body below the full-width hero. */
.legal-shell{
  padding-top:42px!important;
}

/* About page content starts cleanly below its single hero. */
body .about-card{
  margin-top:0!important;
}

@media(max-width:820px){
  .page-titlebar,
  body > .hero,
  body > section.hero,
  .page-hero{
    min-height:260px!important;
    background-position:62% center!important;
  }
  .page-titlebar > .container,
  body > .hero > .hero-inner,
  body > section.hero > .hero-inner,
  .page-hero > .hero-inner{
    padding:42px 0 46px!important;
  }
}
@media(max-width:520px){
  .page-titlebar,
  body > .hero,
  body > section.hero,
  .page-hero{
    min-height:235px!important;
  }
}


/* v86 — final sitewide consistency layer */
html{scroll-behavior:smooth}body{overflow-x:hidden}img{max-width:100%;height:auto}
button,input,select,textarea{font:inherit}:focus-visible{outline:3px solid rgba(31,123,190,.42);outline-offset:3px}
.page-titlebar{width:100%!important;max-width:none!important;margin:0!important;padding:0!important;min-height:0!important;background:linear-gradient(90deg,rgba(6,39,75,.91),rgba(8,49,91,.82) 47%,rgba(7,42,79,.70)),url('../fair-hero.jpg') center/cover no-repeat!important}
.page-titlebar>.container{width:min(calc(100% - (var(--desktop-pad,24px)*2)),var(--desktop-max,1640px))!important;max-width:var(--desktop-max,1640px)!important;margin:0 auto!important;padding:34px 0 38px!important}
.page-titlebar h1{margin:.12em 0 .18em!important;font-size:clamp(2.35rem,4vw,3.8rem)!important;line-height:1.04!important}.page-titlebar p{max-width:920px!important}
.legal-shell{width:min(calc(100% - (var(--desktop-pad,24px)*2)),1180px)!important;max-width:1180px!important;margin:0 auto!important;padding:34px 0 54px!important}.legal-card{width:100%!important;max-width:none!important;box-sizing:border-box!important}
.modal>form{box-sizing:border-box!important;width:min(720px,calc(100vw - 36px))!important;max-width:720px!important;max-height:min(92vh,920px)!important;overflow-y:auto!important;overscroll-behavior:contain}
.modal.small-modal>form,.small-modal>form{width:min(560px,calc(100vw - 36px))!important;max-width:560px!important}
.modal-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:20px!important}.modal-head>div{min-width:0}.modal-close{flex:0 0 auto!important}
.modal .checkbox,#resourceForm .checkbox{display:grid!important;grid-template-columns:22px minmax(0,1fr)!important;gap:14px!important;align-items:start!important;width:100%!important;margin:18px 0!important;line-height:1.5!important}
.modal .checkbox input[type=checkbox],#resourceForm .checkbox input[type=checkbox]{width:20px!important;height:20px!important;min-width:20px!important;margin:4px 0 0!important;padding:0!important}
.modal .checkbox-copy,#resourceForm .checkbox-copy{display:block!important;min-width:0!important;overflow-wrap:break-word!important}.modal .checkbox-copy a,#resourceForm .checkbox-copy a{display:inline!important;white-space:normal!important;font-weight:800!important;text-decoration:underline!important;text-underline-offset:2px!important}
.modal-actions{display:flex!important;justify-content:flex-end!important;align-items:center!important;gap:12px!important;flex-wrap:wrap!important}
.table-wrap,.admin-users-table-wrap{width:100%!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
.card,.idea-card,.experience-card,.resource-card,.legal-card,.admin-card{overflow-wrap:break-word}
@media(min-width:1800px){.page-titlebar>.container{max-width:1760px!important}}
@media(max-width:700px){.page-titlebar>.container{padding:28px 0 32px!important}.legal-shell{width:min(calc(100% - 28px),1180px)!important;padding:22px 0 38px!important}.modal{padding:10px!important;align-items:flex-start!important}.modal>form,.modal.small-modal>form,.small-modal>form{width:100%!important;max-width:none!important;max-height:calc(100dvh - 20px)!important;padding:20px!important;border-radius:16px!important}.modal-actions{display:grid!important;grid-template-columns:1fr!important}.modal-actions .btn{width:100%!important}}


/* v87 — legal pages use the same signed-in navigation as the main site */
.site-header nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hidden{display:none!important}
.nav-dropdown{position:relative}
.nav-drop-toggle{border:0;background:transparent;font:inherit;font-weight:800;color:inherit;cursor:pointer;padding:9px 4px}
.nav-drop-menu{display:none;position:absolute;right:0;top:calc(100% + 8px);z-index:1000;min-width:220px;background:#fff;border:1px solid #d9e2ec;border-radius:14px;box-shadow:0 18px 45px rgba(13,38,68,.16);padding:8px}
.nav-dropdown.open .nav-drop-menu{display:grid}
.nav-drop-menu a,.nav-drop-menu .nav-link{display:block;width:100%;box-sizing:border-box;border:0;background:transparent;text-align:left;padding:10px 12px;border-radius:9px;color:#15243d;text-decoration:none;font:inherit;cursor:pointer}
.nav-drop-menu a:hover,.nav-drop-menu .nav-link:hover{background:#eef6fc}
.nav-user-name{padding:9px 12px 7px;font-size:.88rem;font-weight:800;color:#62738b;border-bottom:1px solid #edf1f5;margin-bottom:4px;overflow-wrap:anywhere}
@media(max-width:900px){.site-header nav{gap:10px}.nav-drop-menu{right:0}}


/* v88 — footer-linked pages use the same top navigation layout as the main/dedicated pages */
body .site-header{
  box-sizing:border-box!important;
  width:100%!important;
  min-height:80px!important;
  height:auto!important;
  padding:10px max(var(--desktop-pad,24px),calc((100% - var(--desktop-max,1640px))/2))!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:28px!important;
  flex-wrap:nowrap!important;
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
  background:#fff!important;
  border-bottom:1px solid var(--line,#dbe4ee)!important;
}

body .site-header .brand{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  flex:0 0 auto!important;
  min-width:0!important;
  color:var(--ink,#15243d)!important;
  text-decoration:none!important;
  font-weight:900!important;
  font-size:1.18rem!important;
  white-space:nowrap!important;
}

body .site-header .brand-mark{
  width:58px!important;
  height:58px!important;
  min-width:58px!important;
  border-radius:16px!important;
  display:grid!important;
  place-items:center!important;
  background:linear-gradient(145deg,#1978bd,#0e5fa8)!important;
  color:#fff!important;
  font-size:.9rem!important;
  font-weight:900!important;
  letter-spacing:.035em!important;
  box-shadow:0 8px 18px rgba(20,105,175,.18)!important;
}

body .site-header nav{
  width:auto!important;
  min-width:0!important;
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:24px!important;
  flex-wrap:nowrap!important;
  overflow:visible!important;
}

body .site-header nav>a,
body .site-header .nav-link,
body .site-header .nav-drop-toggle{
  display:inline-flex!important;
  align-items:center!important;
  border:0!important;
  background:transparent!important;
  color:#35445d!important;
  text-decoration:none!important;
  font:inherit!important;
  font-weight:750!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  padding:8px 0!important;
}

body .site-header nav>a:hover,
body .site-header .nav-link:hover,
body .site-header .nav-drop-toggle:hover{
  color:var(--blue,#1972b8)!important;
  text-decoration:none!important;
}

body .site-header #authBtn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  border:0!important;
  background:#1972b8!important;
  color:#fff!important;
  border-radius:12px!important;
  padding:12px 18px!important;
  font-weight:800!important;
  text-decoration:none!important;
}

body .site-header #authBtn.hidden{display:none!important}
body .site-header .hidden{display:none!important}

body .site-header .nav-dropdown{
  position:relative!important;
  flex:0 0 auto!important;
  width:auto!important;
}

body .site-header .nav-drop-menu{
  display:none!important;
  position:absolute!important;
  right:0!important;
  top:calc(100% + 8px)!important;
  z-index:1200!important;
  min-width:220px!important;
  width:max-content!important;
  max-width:290px!important;
  background:#fff!important;
  border:1px solid var(--line,#dbe4ee)!important;
  border-radius:12px!important;
  padding:7px!important;
  box-shadow:0 14px 34px rgba(15,47,84,.16)!important;
}

body .site-header .nav-dropdown.open .nav-drop-menu{display:block!important}

body .site-header .nav-drop-menu a,
body .site-header .nav-drop-menu button{
  display:block!important;
  width:100%!important;
  box-sizing:border-box!important;
  text-align:left!important;
  border:0!important;
  background:transparent!important;
  color:var(--ink,#15243d)!important;
  text-decoration:none!important;
  padding:10px!important;
  border-radius:8px!important;
  font:inherit!important;
  font-weight:700!important;
  white-space:nowrap!important;
  cursor:pointer!important;
}

body .site-header .nav-drop-menu a:hover,
body .site-header .nav-drop-menu button:hover{
  background:#f1f5f9!important;
  color:var(--blue,#1972b8)!important;
}

body .site-header .nav-user-name{
  padding:8px 10px!important;
  border-bottom:1px solid var(--line,#dbe4ee)!important;
  margin-bottom:4px!important;
  font-size:12px!important;
  color:var(--muted,#65758b)!important;
  font-weight:800!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  max-width:230px!important;
}

/* Do not let old legal-page link rules underline or recolor navigation links. */
body .site-header a,
body .site-header button{
  text-decoration:none!important;
}

/* Tablet/mobile behavior matches the dedicated pages without affecting desktop. */
@media(max-width:1000px){
  body .site-header{
    padding:10px 16px!important;
    gap:14px!important;
    flex-wrap:wrap!important;
  }
  body .site-header nav{
    width:100%!important;
    margin-left:0!important;
    justify-content:flex-start!important;
    gap:14px!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    padding-bottom:2px!important;
  }
  body .site-header .brand-mark{
    width:50px!important;
    height:50px!important;
    min-width:50px!important;
    border-radius:14px!important;
  }
  body .site-header .brand{font-size:1.05rem!important}
}

@media(max-width:620px){
  body .site-header nav{gap:12px!important}
  body .site-header nav>a{font-size:.94rem!important}
}


/* v97 — site polish, deep links and accessibility */
:focus-visible{outline:3px solid #2c7fbd;outline-offset:3px}
[data-deep-link-target]{scroll-margin-top:110px}
.target-highlight{animation:targetPulse 2.8s ease-out;box-shadow:0 0 0 4px rgba(44,127,189,.2),0 12px 30px rgba(20,63,98,.12)!important}
@keyframes targetPulse{0%,45%{background:#fff9d9}100%{background:inherit}}
.form-message:empty{display:none}.form-message:not(:empty){margin-top:10px;padding:10px 12px;border-radius:10px;background:#f3f8fc}
@media(prefers-reduced-motion:reduce){.target-highlight{animation:none}html{scroll-behavior:auto!important}}


/* v115 — accessibility & mobile admin audit */
:root{--focus-ring:#1f5f9d}
button,select,input,textarea,a{touch-action:manipulation}
button,.btn,.nav-link,.link-btn,.icon-btn,.attachment-btn{min-height:44px}
.icon-btn{min-width:44px}
input,select,textarea{font-size:16px}
[aria-disabled="true"],button:disabled{cursor:not-allowed;opacity:.62}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:900px){.site-header{height:auto;min-height:72px;align-items:flex-start;gap:12px;padding-top:12px;padding-bottom:12px}.site-header nav{width:100%;gap:8px;flex-wrap:wrap}.site-header nav>a,.site-header nav>.btn,.site-header nav>.nav-dropdown{min-height:44px}}
