/* ============================================
   Kai & V Wedding – Clean Stylesheet
   Order:
   1) Theme variables
   2) Global resets & layout
   3) Typography
   4) Navbar
   5) Links & Buttons
   6) Forms (incl. RSVP accents)
   7) Media / Images
   8) Utilities
   ============================================ */

/* --------------------------------------------
   1) THEME VARIABLES (Kai's pink + dark)
   -------------------------------------------- */
.theme-kai {
  /* Core */
  --bg: #404040;             /* page background */
  --nav: #e8afd8;            /* navbar background */
  --text: #e9e9e9;           /* body text on dark bg */
  --text-strong: #ffffff;    /* titles on dark bg */

  /* Accents */
  --accent:   #1d264f;       /* blue */
  --accent-2: #2fa67c;       /* green */

  /* Content links */
  --link:       #020811;     /* readable on dark */
  --link-hover: #6edab1;     /* green tint on hover */
}

/* Ensure theme wins over Bulma */
body.theme-kai,
.theme-kai body {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

/* Titles/subtitles on dark */
.theme-kai .title,
.theme-kai .subtitle {
  color: var(--text-strong) !important;
}

/* --------------------------------------------
   2) GLOBAL RESETS & LAYOUT
   -------------------------------------------- */
html, body {
  background-color: var(--bg) !important;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.section { padding-top: 3rem; padding-bottom: 3.5rem; }

.container {
  max-width: 1100px;
  margin: 4rem auto;
  padding: 0 1rem;
  text-align: center;
}

/* --------------------------------------------
   3) TYPOGRAPHY
   -------------------------------------------- */
.title.is-1 { font-size: clamp(2rem, 2.8vw + 1rem, 3rem); line-height: 1.15; }
.title.is-2 { font-size: clamp(1.6rem, 2.2vw + .8rem, 2.2rem); }
.content.is-medium { font-size: 1.05rem; }

/* --------------------------------------------
   4) NAVBAR
   -------------------------------------------- */
.theme-kai .navbar {
  background-color: var(--nav) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: saturate(160%) blur(4px);
}

/* Navbar links: blue by default, green hover/active */
.theme-kai .navbar a.navbar-item,
.theme-kai .navbar a.navbar-link {
  color: var(--accent) !important;
  font-weight: 700;
  font-size: 1.05rem;
}

.theme-kai .navbar a.navbar-item:hover,
.theme-kai .navbar a.navbar-link:hover,
.theme-kai .navbar a.navbar-item.is-active,
.theme-kai .navbar a.navbar-link.is-active {
  color: var(--accent-2) !important;
}

/* make the dropdown panel use the same bg as the bar */
.navbar-menu { background-color: inherit !important; }

/* if you prefer an explicit color instead of inherit */
.navbar-menu { background-color: #e6b3cf !important; }  /* your navbar pink */

/* optional: tidy hover + text colors for items in the menu panel */
.navbar-menu .navbar-item,
.navbar-menu .navbar-link { color: #1a1a1a; }

.navbar-menu .navbar-item:hover,
.navbar-menu .navbar-link:hover { background-color: rgba(0,0,0,0.04); }


/* Left spacing for the first item & taller hit area */
.navbar-start .navbar-item:first-child { margin-left: 0.75rem; }
.navbar-item { padding-top: 0.85rem; padding-bottom: 0.85rem; }

/* --------------------------------------------
   5) LINKS & BUTTONS
   -------------------------------------------- */
.theme-kai a { color: var(--link) !important; }
.theme-kai a:hover { color: var(--link-hover) !important; }
.theme-kai a.light {color: #fff !important; }
.theme-kai a.light-blue {color: #bbe4ff !important;}

.theme-kai .button.is-primary {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.theme-kai .button.is-primary:hover { filter: brightness(.95); }

/* --------------------------------------------
   6) FORMS (RSVP accents + dark inputs)
   -------------------------------------------- */
.theme-kai label,
.theme-kai .label { color: var(--text-strong) !important; }

.theme-kai .input,
.theme-kai .textarea,
.theme-kai .select select {
  background: #2b2b2b !important;
  border: 2px solid #585858 !important;
  color: #f1f1f1 !important;
  border-radius: 10px !important;
}

.theme-kai .input::placeholder,
.theme-kai .textarea::placeholder { color: #bdbdbd !important; }

.theme-kai .input:focus,
.theme-kai .textarea:focus,
.theme-kai .select select:focus {
  border-color: var(--accent-2) !important;             /* green outline on focus */
  box-shadow: 0 0 0 0.125em rgba(47,166,124,.25) !important;
}

/* Radio/checkbox text color on dark */
.theme-kai .radio,
.theme-kai .checkbox { color: var(--text) !important; }

/* Optional: RSVP card look */
.theme-kai .box {
  background: #ffffff;                 /* contrast panel on dark bg */
  border: 1px solid var(--accent-2);   /* subtle green edge */
  border-radius: 14px;
  box-shadow: 0 12px 24px rgba(0,0,0,.18);
}

/* --------------------------------------------
   7) MEDIA / IMAGES
   -------------------------------------------- */
.theme-kai img,
.theme-kai picture img {
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}

/* Party hero image: cap height + auto-crop */
.party-hero {
  max-height: 420px;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.party-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;  /* adjust if you want faces higher/lower */
}

/* Home hero image container (no crop, just tidy) */
.hero { padding-top: 2rem; padding-bottom: 3rem; }
.hero-figure { max-width: 1100px; margin: 0 auto; }
.hero-figure img {
  display: block; width: 100%; height: auto;
  border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.hero-caption { text-align: center; margin-top: .75rem; }

/* --------------------------------------------
   8) UTILITIES
   -------------------------------------------- */
.notification { border-radius: 10px; }
.error { color: #dc2626; }            /* generic error text */

/* ============================================
   A) Light form fields on dark background
   ============================================ */

.theme-kai .box {
  background: #ffffff;                 /* light card */
  border: 1px solid rgba(47,166,124,.35);
  border-radius: 14px;
  box-shadow: 0 14px 28px rgba(0,0,0,.22);
}

/* inputs/selects/textarea: light surface */
.theme-kai .input,
.theme-kai .textarea,
.theme-kai .select select {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 1px solid #d4d7db !important;
  border-radius: 10px !important;
}

.theme-kai .input::placeholder,
.theme-kai .textarea::placeholder { color: #7a7f87 !important; }

.theme-kai .input:focus,
.theme-kai .textarea:focus,
.theme-kai .select select:focus {
  border-color: var(--accent-2) !important;            /* green */
  box-shadow: 0 0 0 0.15rem rgba(47,166,124,.25) !important;
}

/* radios/checkboxes read well on dark */
.theme-kai .radio,
.theme-kai .checkbox { color: var(--text) !important; }

/* primary action button */
.theme-kai .button.is-primary {
  background-color: var(--accent) !important;          /* blue */
  border-color: var(--accent) !important;
  color: #fff !important;
}
.theme-kai .button.is-primary:hover { filter: brightness(.95); }

/* Force dark text for form copy *inside* light boxes */
.theme-kai .box .title,
.theme-kai .box .subtitle,
.theme-kai .box .label,
.theme-kai .box label,
.theme-kai .box .radio,
.theme-kai .box .checkbox,
.theme-kai .box .help,
.theme-kai .box .content {
  color: #1a1a1a !important;
}

/* Radio/checkbox control color (bullets) */
.theme-kai .box .radio input[type="radio"] + span,
.theme-kai .box .checkbox input[type="checkbox"] + span {
  color: #1a1a1a !important;
}

/* Optional utility if you ever need to force black text */
.u-text-black { color: #1a1a1a !important; }


/* ============================================
   B) Text highlight utilities
   ============================================ */

/* soft underline “marker” highlight (good for headings) */
.u-hl-underline {
  background: linear-gradient(
    to bottom,
    transparent 62%,
    rgba(47,166,124,.35) 62%       /* green wash */
  );
  box-decoration-break: clone;
}

/* pill highlight (wraps tight around text) */
.u-hl-pill {
  background: var(--accent);        /* blue */
  color: #fff;
  padding: .1em .35em;
  border-radius: .5em;
  box-decoration-break: clone;
}

/* if you want a green pill instead */
.u-hl-pill--green {
  background: var(--accent-2);
  color: #0b281f;
}

/* ============================================
   C) Minor layout safety
   ============================================ */

/* make sure the page bg never exposes white below content */
html, body { background-color: var(--bg) !important; min-height: 100%; }

/* Optional: center the RSVP box on very wide screens */
@media (min-width: 1216px) {
  .theme-kai .box.rsvp-box { margin-left: auto; margin-right: auto; max-width: 960px; }
}

/* Sticky footer */
html, body { height: 100%; }          /* so 100vh calculations are solid */
body.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-main { flex: 1 0 auto; }        /* this grows to fill the space */
.footer { margin-top: auto; }         /* belt-and-braces push to bottom */


/* Footer links on dark background */
.footer a { text-decoration: underline; }
.footer a:hover { opacity: .85; }

.footer-bg { background-color: #404040;}

/* Best-effort copy friction — not bulletproof */
.no-copy {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
}

/* Optional: block copy attempts on .no-copy and replace clipboard text */
.no-copy[data-mask] {}