/* =========================
   MB Codebase v1.1
   - Mobile-first
   - Flex utilities
   - Spacing uses vh
   - Text sizing uses em
   ========================= */

/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}
ul,
ol {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
}

/* THEME TOKENS */
:root {
  --bg: #ffffff;
  --text: #111111;
  --muted: #666666;
  --border: #e6e6e6;
  --brand-white: #fefefe;
  --brand-pink: #f7196e;
  --brand-blue: #0074bf;
  --brand-yellow: #fcaf00;
  --brand-teal: #81d4b6;

  --primary: #0066cc;
  --primary-text: #ffffff;

  --container: 1100px;
  --radius: 12px;

  --heading-font: 'Jost', system-ui, sans-serif;
  --body-font: 'Lato', system-ui, -apple-system, sans-serif;

  /* Layout heights (vh) */
  --header-h: 8vh;

  /* Brand Variables */
}

/* BASE */
html {
  font-size: 16px;
  overflow-x: hidden;
}
body {
  font-family: system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font);
}

p,
li,
a {
  font-family: var(--body-font);
}
h1 {
  font-size: 3em;
  line-height: 1.15;
}
h2 {
  font-size: 1.6em;
  line-height: 1.2;
}
h3 {
  font-size: 1.25em;
  line-height: 1.25;
}
p,
a,
button,
small {
  font-size: 1em;
}

/* Desktop: larger h2 */
@media (min-width: 56em) {
  h2 {
    font-size: 2.5em;
  }
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.logo {
  width: 90vw;
  height: auto;
}

.small-logo {
  width: 40vw;
  height: auto;
}

.sponsor-logo {
  width: 40vw;
  height: auto;
}

.major-sponsor {
  width: 60vw;
}

@media only screen and (min-width: 56.25em) {
  .logo {
    width: 70vh;
    height: auto;
  }
  .small-logo {
    width: 10vw;
    height: auto;
  }
  .sponsor-logo {
    width: 15vw;
    height: auto;
  }
  .major-sponsor {
    width: 20vw;
  }
}

/* ACCESSIBILITY */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--primary);
  color: var(--primary-text);
  padding: 1vh 2vh;
  border-radius: var(--radius);
}
.skip-link:focus {
  left: 2vh;
  top: 2vh;
  z-index: 9999;
}

/* CONTAINER */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 2vh; /* vh by preference */
}

/* =========================
   UTILITIES (MB)
   ========================= */

/* Flex */
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.flex-row {
  flex-direction: row;
}
/* Cross-axis alignment */
.align-start {
  align-items: flex-start;
}
.align-center {
  align-items: center;
}
.align-end {
  align-items: flex-end;
}
.align-stretch {
  align-items: stretch;
}

/* Main-axis alignment */
.justify-start {
  justify-content: flex-start;
}
.justify-center {
  justify-content: center;
}
.justify-end {
  justify-content: flex-end;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.justify-evenly {
  justify-content: space-evenly;
}

/* Gaps (vh) */
.gap-1 {
  gap: 1vh;
}
.gap-2 {
  gap: 2vh;
}
.gap-3 {
  gap: 3vh;
}
.gap-4 {
  gap: 4vh;
}
.gap-5 {
  gap: 5vh;
}
.gap-10 {
  gap: 10vh;
}

/* Spacing (vh) */
.mt-1 {
  margin-top: 1vh;
}
.mt-2 {
  margin-top: 2vh;
}
.mt-3 {
  margin-top: 3vh;
}
.mt-4 {
  margin-top: 4vh;
}
.mt-5 {
  margin-top: 5vh;
}
.mt-10 {
  margin-top: 10vh;
}
.mb-1 {
  margin-bottom: 1vh;
}
.mb-2 {
  margin-bottom: 2vh;
}
.mb-5 {
  margin-bottom: 5vh;
}
.mb-10 {
  margin-bottom: 10vh;
}

/* Padding (vh) */
.p-1 {
  padding: 1vh;
}
.p-2 {
  padding: 2vh;
}
.p-3 {
  padding: 3vh;
}
.p-4 {
  padding: 4vh;
}
.p-5 {
  padding: 5vh;
}
.p-10 {
  padding: 10vh;
}

/* Width */
.w-full {
  width: 100%;
}
.text-center {
  text-align: center;
}
.md-w-half {
  width: 100%;
}

.header-spacer {
  flex: 1;
}

/* .monkey-menu {
  width: 95vw;
} */

/* =========================
   COMPONENTS (minimal)
   ========================= */
.site-header {
  height: var(--header-h);
  /* border-bottom: 1px solid var(--border); */
  display: flex;
  align-items: center;
  /* background: var(--bg); */
  background-color: var(--brand-pink);
}
.brand {
  font-weight: 800;
  font-size: 1.2em;
  letter-spacing: 0.02em;
  color: #fff;
  font-family: var(--heading-font);
}

.brand-k {
  color: var(--brand-yellow);
}

.nav {
  display: none;
}
.nav-toggle {
  padding: 1vh 2vh;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
}

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 1vh 2vh; /* vh spacing */
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 1em; /* em-based text */
  line-height: 1;
}
.btn-primary {
  background: var(--primary);
  background-color: var(--brand-yellow);
  border-color: #fff;
  color: #222;
}
.btn-ghost {
  background: #fff;
  border-color: var(--border);
  border-color: var(--brand-pink);
  color: var(--brand-pink);
}

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-top: 1px solid var(--border);
  padding: 2vh 0;
  min-height: 10vh;
  background-color: #666666;
}

.icon {
  width: 5vh;
  height: 5vh;
}

.header-icon {
  width: 3vh;
  height: 3vh;
}

.social-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2vh;
  margin-bottom: 2vh;
}

/* =========================
   Monkey Menu (MM) – mobile hamburger + desktop nav
   Variants: .mm--top | .mm--right | .mm--left
   ========================= */

:root {
  --menubg-color: rgba(39, 39, 39, 0.95);
  --menu-speed: 0.35s;
  --menu-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --menu-accent: var(--brand-vanilla, #e4d6a7);
}

/* Desktop/mobile visibility */
.nav-desktop {
  display: none;
}
.mm-toggle {
  display: inline-flex;
}

/* Hamburger button (keeps your look) */
.mm-toggle {
  position: relative;
  z-index: 1100;
  width: 65px;
  height: 50px;
  border: 0;
  background: transparent;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: auto;
}
/* margin-left: auto; places hamburger to the right on mobile.  margin-right will place it to the left. */

/* Focus ring (a11y) */
.mm-toggle:focus-visible,
.mm-panel a:focus-visible {
  outline: 2px solid var(--menu-accent);
  outline-offset: 4px;
}

/* 3-line hamburger */
.mm-bars {
  position: relative;
  width: 34px;
  height: 3px;
  background: var(--menu-accent);
  transition: transform var(--menu-speed) var(--menu-ease);
}
.mm-bars::before,
.mm-bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 34px;
  height: 3px;
  background: var(--menu-accent);
  transition:
    transform var(--menu-speed) var(--menu-ease),
    top var(--menu-speed) var(--menu-ease);
}
.mm-bars::before {
  top: -10px;
}
.mm-bars::after {
  top: 10px;
}

/* Panel base */
.mm-panel {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: block;
}

/* Hidden is managed by JS */
.mm-panel[hidden] {
  display: none;
}

.mm-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity var(--menu-speed) var(--menu-ease);
}

.mm-surface {
  position: absolute;
  background: var(--menubg-color);
  color: var(--menu-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--menu-speed) var(--menu-ease);
}

.mm-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: transparent;
  border: none;
  color: var(--menu-accent);
  font-size: 2rem;
  cursor: pointer;
  z-index: 1100;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color var(--menu-speed) var(--menu-ease);
}

.mm-close:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Menu list styling (keeps your vibe) */
.mm-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3vh;
  padding: 15vh 0;
  text-align: center;
}
.mm-list a {
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 1.1em;
}
.mm-list a:hover {
  color: var(--brand-blue, #98c1d9);
}

/* ===== Variants ===== */

/* TOP: full-screen drop */
.mm--top .mm-surface {
  inset: 0;
  transform: translateY(-100%);
}

/* RIGHT: drawer */
.mm--right .mm-surface {
  top: 0;
  right: 0;
  bottom: 0;
  width: min(80vw, 420px);
  transform: translateX(100%);
}

/* LEFT: drawer */
.mm--left .mm-surface {
  top: 0;
  left: 0;
  bottom: 0;
  width: min(80vw, 420px);
  transform: translateX(-100%);
}

/* ===== Open state ===== */
body.mm-open {
  overflow: hidden;
}

body.mm-open .mm-overlay {
  opacity: 1;
}

/* slide in */
body.mm-open .mm--top .mm-surface {
  transform: translateY(0);
}
body.mm-open .site-header {
  z-index: 1200;
}
body.mm-open .mm-toggle {
  pointer-events: auto;
}

/* Turn hamburger into X */
body.mm-open .mm-bars {
  transform: rotate(135deg);
}
body.mm-open .mm-bars::before,
body.mm-open .mm-bars::after {
  top: 0;
  transform: rotate(90deg);
}

/* Desktop breakpoint */
@media (min-width: 56em) {
  .nav-desktop {
    display: block;
  }
  .nav-desktop a {
    color: #ffffff;
    text-transform: uppercase;
  }
  .mm-toggle {
    display: none;
  }
  .mm-panel {
    display: none;
  } /* don’t allow mobile overlay on desktop */
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mm-overlay,
  .mm-surface,
  .mm-bars,
  .mm-bars::before,
  .mm-bars::after {
    transition: none;
  }
}

/* =========================
   RESPONSIVE (project-specific breakpoints)
   Default desktop breakpoint: 56em
   ========================= */
@media (min-width: 56em) {
  .md-flex-row {
    flex-direction: row;
  }
  .md-flex-col {
    flex-direction: column;
  }
  .md-w-half {
    width: 50%;
  }

  .nav {
    display: block;
  }
  .nav-toggle {
    display: none;
  }
}

@media (max-width: 55.99em) {
  .site-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
  }
  .services > .container {
    padding: 5vh 0;
  }
}

.landing {
  background-color: var(--brand-white);
  min-height: 80vh;
  color: #fff;
}

/* =========================
   Landing (full-bleed background)
   ========================= */

.landing {
  position: relative;

  /* Height */
  min-height: 80vh;
  min-height: 80dvh; /* mobile-safe viewport */

  /* Layout */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Background image */
  /* background-image: url('./img/landing.avif');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; */
}

/* Optional dark overlay for readability */
.landing::before {
  content: '';
  position: absolute;
  inset: 0;
  /* background: rgba(0, 0, 0, 0.45); */
}

/* Ensure content sits above overlay */
.landing > .container {
  position: relative;
  z-index: 1;
}

/* Optional text defaults for landing content */
.landing h2,
.landing p {
  color: var(--brand-blue);
  text-align: center;
}

.landing h4 {
  color: var(--brand-yellow);
  text-align: center;
}

/* Desktop landing heading size */
@media (min-width: 56em) {
  .landing h1 {
    font-size: 5em;
  }
}

/* Services section */
.services {
  position: relative;
  min-height: 80vh;
  min-height: 80dvh; /* mobile-safe viewport */

  /* Layout */
  display: flex;
  align-items: flex-start;
  justify-content: center;

  background-color: var(--brand-pink);
  /* Background image */
  /* background-image: url('./img/services.avif');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; */
}

/* Optional dark overlay for readability */
.services::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
}

/* Ensure content sits above overlay */
.services > .container {
  position: relative;
  z-index: 1;
}

/* Services text colors */
.services h2,
.services p,
.services h3 {
  color: #ffffff;
}

.services h2 {
  margin-top: 4vh;
}

/* Services grid and items */
.services-grid {
  display: flex;
  flex-direction: column;
  gap: 2vh;
}

.service-item {
  background-color: #f5f5f5;
  padding: 4vh;
  border-radius: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.service-item h3 {
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 2vh;
  font-size: 1.1em;
  line-height: 1.2;
  word-break: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  color: #111111; /* Dark text for contrast on light grey background */
}

.service-item p {
  color: #666666;
  line-height: 1.5;
  flex-grow: 1;
  margin-top: auto;
}

/* Desktop: services in a row */
@media (min-width: 56em) {
  .services-grid {
    flex-direction: row;
    gap: 3vh;
  }

  .service-item {
    flex: 1;
    min-height: 100%;
  }

  .services h2 {
    margin-top: 5vh;
  }
}

/* Bio section */
.bio {
  background-color: var(--brand-yellow);
  min-height: 50vh;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.bio .container {
  max-width: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.bio h2 {
  color: var(--brand-pink);
}

.bio p {
  color: #222;
}

.bio-image {
  width: 100%;
}

.bio-text {
  width: 100%;
  padding-bottom: 4vh; /* Padding at bottom on mobile */
}

.bio-text .btn {
  align-self: center;
  margin: 0 auto;
  display: block;
}

/* Desktop: bio layout */
@media (min-width: 56em) {
  .bio-image {
    width: 50%;
  }

  .bio-text {
    width: 50%;
    padding: 6vh; /* Generous padding on desktop */
  }
}

/* Contact section */
.contact {
  background-color: #000;
  min-height: 80vh;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.contact .container {
  max-width: none;
  padding: 0;
}

.contact h2,
.contact p {
  color: #fff;
}

.contact-text {
  padding: 6vh;
  width: 90vw;
}

.contact-form-container {
  padding: 0vh;
  width: 90vw;
}

.contact-form {
  max-width: 500px;
}

.contact-form label {
  color: #fff;
  font-family: var(--body-font);
}

.contact-form input,
.contact-form textarea {
  width: 90%; /* 90% on mobile */
  padding: 1vh;
  border: 1px solid #666;
  border-radius: 4px;
  background-color: #333;
  color: #fff;
  font-family: var(--body-font);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #d4af37;
}

/* Desktop: wider form inputs */
@media (min-width: 56em) {
  .contact-form input,
  .contact-form textarea {
    width: 80%; /* Wider on desktop */
  }
  .contact-form-container {
    width: 50vw;
  }
  .contact-text {
    width: 50vw;
  }
}

/* Insights section */
.insights {
  background-color: #fff;
  min-height: 80vh;
  padding: 5vh 0;
}

.insights h2,
.insights p {
  color: #222;
}

.insights-grid {
  display: flex;
  flex-direction: column;
  gap: 2vh;
}

.insights-grid > img {
  align-self: center;
}

.insight-card {
  background-color: #222;
  color: #fff;
  padding: 4vh;
  border-radius: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.insight-card h3 {
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 2vh;
  font-size: 1.1em;
  line-height: 1.2;
}

.insight-card p {
  color: #dcdcdc;
  flex-grow: 1;
  margin-top: auto;
}

.insight-card .icon {
  align-self: center;
  margin-top: 2vh;
}

/* Desktop: insights row */
@media (min-width: 56em) {
  .insights-grid {
    flex-direction: row;
    gap: 3vh;
  }

  .insight-card {
    flex: 1;
    min-height: 100%;
  }
}

/* This is a spam stopper on email address in contact form.  It is hidden by CSS and ignored by users, but bots will fill it out and can be filtered out in the backend. */
#email_add {
  display: none;
}

/* <!-- =========================
This is the HTML if I want a section to have a fixed background, with content scrolling over it.
========================= --> */
/* <section class="about-page">
  <div class="bg"></div>

  <div class="content container">
    <h1>About</h1>
    <p>Scrolling content goes here.</p>
  </div>
</section> */

/* <!-- =========================
This is the CSS if I want a section to have a fixed background, with content scrolling over it.  Class name is changeable for any name.
========================= --> */

/* .about-page {
  position: relative;
  min-height: 100dvh;
  overflow: clip; 
}

.about-page .bg {
  position: sticky;
  top: 0;
  height: 100dvh;

  background-image: url("../img/about.avif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  z-index: 0;
}

.about-page .content {
  position: relative;
  z-index: 1;
} */