/* ========================================================================
   honeygrow Leadership Conference 2027 — Sponsorship microsite
   Locked color palette. Don't introduce new colors without updating the
   palette block below and the README reference.
   ======================================================================== */

:root {
  /* Primary */
  --color-dark:   #202723;
  --color-yellow: #FFE636;
  --color-cream:  #F9F7EA;

  /* Splash — use sparingly, one per "moment" */
  --splash-coral:    #FF645A;
  --splash-green:    #75B849;
  --splash-magenta:  #D64283;
  --splash-teal:     #5FB6BE;

  /* System */
  --max-width: 1200px;
  --gutter: 24px;
  --radius: 6px;
  --transition: 150ms ease;

  --font-sans: "Inter", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  background: var(--color-cream);
  color: var(--color-dark);
  line-height: 1.5;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, h4 {
  line-height: 1.2;
  font-weight: 600;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

h1 { font-size: 3.25rem; letter-spacing: -0.02em; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

a {
  color: var(--color-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: background var(--transition), color var(--transition);
}
a:hover {
  background: var(--color-yellow);
  color: var(--color-dark);
}

[hidden] { display: none !important; }

/* ----- Layout primitives ------------------------------------------------- */

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container--narrow { max-width: 760px; }

.section {
  padding: 88px 0;
}
.section--confirmation { padding-top: 40px; padding-bottom: 40px; }

.section-body {
  font-size: 1.15rem;
  max-width: 720px;
}

.section-lede {
  font-size: 1.1rem;
  max-width: 640px;
  margin-bottom: 36px;
  opacity: 0.85;
}

.section-accent {
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  margin-bottom: 20px;
}
.section-accent--coral   { background: var(--splash-coral); }
.section-accent--green   { background: var(--splash-green); }
.section-accent--magenta { background: var(--splash-magenta); }
.section-accent--teal    { background: var(--splash-teal); }

/* ----- Hero -------------------------------------------------------------- */

.hero {
  background: var(--color-dark);
  color: var(--color-cream);
  padding: 96px 0 88px;
  position: relative;
  overflow: hidden;
}

.hero__inner {
  position: relative;
  z-index: 1;
}

.hero__logo {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 56px;
}
.hero__logo-mark {
  display: block;
  height: 200px;
  width: auto;
  flex-shrink: 0;
}
.hero__logo-title {
  display: flex;
  flex-direction: column;
  font-weight: 400;
  font-size: 2.65rem;
  line-height: 1.05;
  color: var(--color-cream);
  letter-spacing: -0.01em;
}
.hero__logo-year {
  margin-top: 6px;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--color-yellow);
  font-weight: 300;
}

.hero__meta { margin-bottom: 56px; }
.hero__dates {
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0 0 4px;
  color: var(--color-yellow);
}
.hero__location {
  font-size: 1rem;
  margin: 0;
  opacity: 0.85;
}

.hero__headline h1 {
  font-size: 3.5rem;
  line-height: 1.05;
  margin: 0 0 20px;
}
.hero__headline p {
  font-size: 1.2rem;
  max-width: 640px;
  margin: 0;
  opacity: 0.9;
}

/* Decorative arrows — one per splash color, scattered on the right side
   where they won't fight the logo or headline. */
.hero__arrows {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.deco-arrow {
  position: absolute;
  width: 48px;
  height: 64px;
  opacity: 0.85;
}
.deco-arrow--1 { top: 8%;  right: 6%;  color: var(--splash-coral);   transform: rotate(-12deg); width: 56px; height: 75px; }
.deco-arrow--2 { top: 52%; right: 14%; color: var(--splash-teal);    transform: rotate(8deg); }
.deco-arrow--3 { bottom: 8%; right: 4%; color: var(--splash-magenta); transform: rotate(20deg); width: 40px; height: 54px; }
.deco-arrow--4 { top: 32%; right: 38%; color: var(--splash-green);   transform: rotate(-4deg); width: 32px; height: 42px; opacity: 0.6; }

@media (max-width: 768px) {
  .deco-arrow--3, .deco-arrow--4 { display: none; }
  .deco-arrow--1 { width: 40px; height: 54px; top: 4%; right: 4%; }
  .deco-arrow--2 { width: 36px; height: 48px; top: 64%; right: 8%; }
}

/* ----- Why partner ------------------------------------------------------- */

.section--why {
  background: var(--color-cream);
}

.stat-highlight {
  background: linear-gradient(transparent 62%, var(--splash-coral) 62%);
  padding: 0 4px;
  font-weight: 700;
  white-space: nowrap;
}

/* ----- Tiers section ----------------------------------------------------- */

.section--tiers { background: var(--color-cream); padding-top: 0; }

.container--with-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
}

@media (max-width: 1100px) {
  .container--with-panel { grid-template-columns: minmax(0, 1fr); }
  .summary-panel { display: none; }
}

.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.tier-grid__loading {
  font-style: italic;
  opacity: 0.6;
}

/* ----- Tier card --------------------------------------------------------- */

.tier-card {
  background: var(--color-cream);
  border: 1px solid var(--color-dark);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition), box-shadow var(--transition), opacity var(--transition);
  position: relative;
}

.tier-card:hover {
  border-color: var(--color-yellow);
  box-shadow: 0 0 0 2px var(--color-yellow);
}

.tier-card.is-selected {
  border-color: var(--color-yellow);
  box-shadow: 0 0 0 3px var(--color-yellow);
}

.tier-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.tier-card__name {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
}

.tier-card__badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.tier-card__badge--exclusive { background: var(--color-yellow); color: var(--color-dark); }
.tier-card__badge--limited   { background: var(--color-dark); color: var(--color-cream); }
.tier-card__badge--claimed   { background: #888; color: var(--color-cream); }

.tier-card__price {
  font-size: 2rem;
  font-weight: 700;
  margin: 12px 0 20px;
  letter-spacing: -0.015em;
}
.tier-card__price-amount {
  border-bottom: 3px solid var(--color-yellow);
  padding-bottom: 1px;
}

.tier-card__benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  flex: 1;
}
.tier-card__benefits li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 12px;
  font-size: 0.95rem;
  line-height: 1.45;
}
.tier-card__benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 12px;
  height: 2px;
  background: var(--color-dark);
}

.tier-card__upsell {
  display: none;
  margin: 0 0 16px;
  padding: 12px;
  background: rgba(255, 230, 54, 0.18);
  border-radius: 4px;
}
.tier-card.is-selected .tier-card__upsell { display: block; }

.tier-card__upsell label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  line-height: 1.4;
  cursor: pointer;
}
.tier-card__upsell input { margin-top: 3px; }

.tier-card__cta { width: 100%; }

.tier-card__claimed-message {
  display: none;
  font-style: italic;
  opacity: 0.7;
  text-align: center;
  margin: 8px 0 0;
}

.tier-card.is-claimed {
  opacity: 0.5;
}
.tier-card.is-claimed:hover {
  border-color: var(--color-dark);
  box-shadow: none;
}
.tier-card.is-claimed .tier-card__cta { display: none; }
.tier-card.is-claimed .tier-card__claimed-message { display: block; }

/* ----- Summary panel (desktop) ------------------------------------------ */

.summary-panel {
  position: sticky;
  top: 24px;
  background: var(--color-cream);
  border: 1px solid var(--color-dark);
  border-radius: var(--radius);
  padding: 24px;
}

.summary-panel h3 { margin: 0 0 16px; }

.summary-panel__empty {
  font-style: italic;
  opacity: 0.6;
  margin: 0 0 16px;
}

.summary-item {
  border-top: 1px solid rgba(32, 39, 35, 0.12);
  padding: 12px 0;
}
.summary-item:first-child { border-top: none; padding-top: 0; }

.summary-item__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.summary-item__name { font-weight: 500; font-size: 0.95rem; }
.summary-item__price { font-weight: 500; white-space: nowrap; }
.summary-item__upsell {
  font-size: 0.85rem;
  opacity: 0.75;
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
}

.summary-item__remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-dark);
  padding: 0 4px;
  border-radius: 3px;
  margin-left: 4px;
  transition: background var(--transition);
}
.summary-item__remove:hover { background: var(--color-yellow); }

.summary-panel__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 16px;
  border-top: 2px solid var(--color-dark);
  margin: 4px 0 16px;
  font-weight: 600;
  font-size: 1.1rem;
}

/* ----- Mobile sticky bar ------------------------------------------------ */

.mobile-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--color-dark);
  color: var(--color-cream);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 100;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
}
.mobile-bar__info { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.mobile-bar__info span:first-child { font-size: 0.78rem; opacity: 0.8; }
.mobile-bar__info span:last-child  { font-size: 1.05rem; font-weight: 700; color: var(--color-yellow); }

.mobile-bar .btn--solid {
  padding: 10px 18px;
  background: var(--color-yellow);
  color: var(--color-dark);
  border-color: var(--color-yellow);
}
.mobile-bar .btn--solid:hover {
  background: var(--color-cream);
  color: var(--color-dark);
  border-color: var(--color-cream);
}

@media (min-width: 1101px) {
  .mobile-bar { display: none !important; }
}

/* ----- Buttons ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: var(--radius);
  cursor: pointer;
  border: 2px solid var(--color-dark);
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition), opacity var(--transition);
  line-height: 1.2;
}

.btn--solid {
  background: var(--color-dark);
  color: var(--color-yellow);
}
.btn--solid:hover:not(:disabled) {
  background: var(--color-yellow);
  color: var(--color-dark);
}

.btn--stroke {
  background: transparent;
  color: var(--color-dark);
}
.btn--stroke:hover:not(:disabled) {
  background: var(--color-yellow);
  color: var(--color-dark);
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn--full { width: 100%; }

/* ----- Form ------------------------------------------------------------- */

.section--form { background: var(--color-cream); }

.sponsor-form fieldset {
  border: none;
  padding: 0;
  margin: 0 0 32px;
}
.sponsor-form legend {
  font-size: 1.25rem;
  font-weight: 600;
  padding: 0;
  margin-bottom: 16px;
}

.form-row { margin-bottom: 16px; }
.form-row--two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row--three { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; }

@media (max-width: 600px) {
  .form-row--two,
  .form-row--three { grid-template-columns: 1fr; }
}

.sponsor-form label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
}

.sponsor-form input[type="text"],
.sponsor-form input[type="email"],
.sponsor-form input[type="tel"],
.sponsor-form input[type="file"],
.sponsor-form textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  padding: 10px 12px;
  margin-top: 6px;
  border: 1px solid var(--color-dark);
  border-radius: 4px;
  background: white;
  color: var(--color-dark);
  font-weight: 400;
}

.sponsor-form input:focus,
.sponsor-form textarea:focus {
  outline: 2px solid var(--color-yellow);
  outline-offset: 1px;
}

.sponsor-form input:invalid:not(:placeholder-shown) {
  border-color: var(--splash-coral);
}

.sponsor-form .req { color: var(--splash-coral); margin-left: 1px; }

.form-helper {
  font-size: 0.85rem;
  opacity: 0.75;
  margin: 8px 0 0;
}

.file-label input[type="file"] {
  background: white;
  padding: 10px 12px;
  cursor: pointer;
}

.radio-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--color-dark);
  border-radius: 4px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: background var(--transition), border-width var(--transition);
}
.radio-card:hover { background: rgba(255, 230, 54, 0.18); }
.radio-card input { width: auto; margin: 5px 0 0; flex-shrink: 0; }
.radio-card__label { display: flex; flex-direction: column; gap: 2px; }
.radio-card__label strong { font-weight: 600; }
.radio-card__sub { font-size: 0.85rem; opacity: 0.75; font-weight: 400; }
.radio-card:has(input:checked) {
  border-width: 2px;
  padding: 13px 15px;
  background: rgba(255, 230, 54, 0.22);
}

/* ----- Order summary (inside form) -------------------------------------- */

.order-summary {
  background: rgba(32, 39, 35, 0.04);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 28px;
}
.order-summary h3 { margin: 0 0 16px; }

.order-summary__line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid rgba(32, 39, 35, 0.08);
  font-size: 0.95rem;
  gap: 12px;
}
.order-summary__line:last-child { border-bottom: none; }
.order-summary__line-name { flex: 1; }
.order-summary__line--sub { font-size: 0.85rem; opacity: 0.75; padding-top: 0; padding-bottom: 8px; }
.order-summary__line--sub .order-summary__line-name { padding-left: 16px; }

.order-summary__totals { margin-top: 16px; }
.order-summary__row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
}
.order-summary__row--total {
  font-weight: 700;
  font-size: 1.2rem;
  padding-top: 12px;
  margin-top: 8px;
  border-top: 2px solid var(--color-dark);
}

.form-error {
  background: var(--splash-coral);
  color: white;
  padding: 12px 16px;
  border-radius: 4px;
  margin-top: 16px;
  font-weight: 500;
}

/* ----- Confirmation ----------------------------------------------------- */

.section--confirmation { background: var(--color-cream); }

.confirmation__card {
  background: var(--color-cream);
  border: 2px solid var(--color-dark);
  border-radius: var(--radius);
  padding: 56px 32px;
  text-align: center;
}
.confirmation__check {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-yellow);
  color: var(--color-dark);
  font-size: 2rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.confirmation__card h2 { margin-bottom: 16px; }
.confirmation__card p { margin: 8px 0; }

/* ----- Event details ---------------------------------------------------- */

.section--event-details { background: var(--color-cream); }

/* ----- Footer ----------------------------------------------------------- */

.footer {
  background: var(--color-dark);
  color: var(--color-cream);
  padding: 56px 0;
}
.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.footer__wordmark { font-size: 1.15rem; font-weight: 600; margin: 0 0 4px; }
.footer__meta { margin: 0; font-size: 0.9rem; opacity: 0.75; }

.footer a {
  color: var(--color-yellow);
  font-weight: 500;
}
.footer a:hover {
  background: var(--color-yellow);
  color: var(--color-dark);
}

/* ----- Mobile tweaks ---------------------------------------------------- */

@media (max-width: 768px) {
  body { padding-bottom: 80px; }
  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.75rem; }
  .section { padding: 56px 0; }
  .hero { padding: 64px 0 56px; }
  .hero__headline h1 { font-size: 2.5rem; }
  .hero__headline p { font-size: 1.05rem; }
  .hero__logo { gap: 18px; margin-bottom: 40px; }
  .hero__logo-mark { height: 130px; }
  .hero__logo-title { font-size: 1.75rem; }
  .hero__meta { margin-bottom: 40px; }
  .confirmation__card { padding: 40px 24px; }
}