/* ==========================================================================
   custom-LKYFB.css
   LKY Fund for Bilingualism — 15th Anniversary microsite (prototype)
   Custom styles only. Bootstrap 5 is loaded separately (CDN) and provides the
   grid, reboot, and base components. This file holds ONLY our brand overrides,
   the masthead, animations, and custom components. No CSS var(--x) used.

   Palette: maroon #9d1c20 | maroon-dark #7c1518 | gold #b98a2f
            gold-light #d9b26a | cream #fffdf9 | ink #2b2320
   ========================================================================== */

/* ---------- Page base ---------- */
body {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: #2b2320;
  background: linear-gradient(180deg, #f6e2e1 0%, #f3ddd8 32%, #f0d6c4 66%, #ecceac 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* ==========================================================================
   Masthead hero (custom — not a Bootstrap component)
   ========================================================================== */
.masthead {
  position: relative;
  width: calc(100% - 2.5rem);
  max-width: 760px;
  aspect-ratio: 16 / 9;
  margin: 2rem auto 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(185, 138, 47, 0.40);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(125, 40, 30, 0.10);
}

  .masthead img {
    position: absolute;
    display: block;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
  }

/* Element placement (percentages of the 1920x1080 composition) */
.mh-top-left {
  top: -22%;
  left: -11%;
  width: 33%;
}

.mh-top-right {
  top: -16%;
  right: -13%;
  width: 30%;
}

.mh-logo {
  top: 5.5%;
  right: 2.3%;
  width: 18%;
}

.mh-middle {
  top: 37%;
  left: 40%;
  width: 55.5%;
  margin-left: -16.75%;
}

.mh-bottom-left {
  bottom: -70%;
  left: -28%;
  width: 47%;
}

.mh-bottom-right {
  bottom: -24%;
  right: -8%;
  width: 33%;
}

.mh-text-bottom {
  bottom: 3.5%;
  left: 50%;
  width: 71%;
  margin-left: -35.5%;
}

/* ---------- Masthead entrance animations ---------- */
@keyframes blobIn {
  from {
    opacity: 0;
    transform: scale(0.6);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bubblePop {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-12deg);
  }

  70% {
    opacity: 1;
    transform: scale(1.08) rotate(2deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes riseFade {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes logoIn {
  from {
    opacity: 0;
    transform: translateX(24px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes floaty {
  0%, 100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -1.2%;
  }
}

/* 4 corners animate in together; centre pieces follow. */
.mh-top-left {
  transform-origin: top left;
  opacity: 0;
  animation: blobIn 0.9s cubic-bezier(.22,1,.36,1) 0.15s forwards;
}

.mh-bottom-right {
  transform-origin: bottom right;
  opacity: 0;
  animation: blobIn 0.9s cubic-bezier(.22,1,.36,1) 0.15s forwards;
}

.mh-top-right {
  transform-origin: 70% 30%;
  opacity: 0;
  animation: bubblePop 0.8s cubic-bezier(.34,1.56,.64,1) 0.15s forwards;
}

.mh-bottom-left {
  transform-origin: 40% 70%;
  opacity: 0;
  animation: bubblePop 0.9s cubic-bezier(.34,1.56,.64,1) 0.15s forwards;
}

.mh-middle {
  opacity: 0;
  animation: riseFade 0.8s cubic-bezier(.22,1,.36,1) 0.4s forwards, floaty 6s ease-in-out 1.4s infinite;
}

.mh-logo {
  opacity: 0;
  animation: logoIn 0.7s cubic-bezier(.22,1,.36,1) 0.55s forwards;
}

.mh-text-bottom {
  opacity: 0;
  animation: riseFade 0.7s cubic-bezier(.22,1,.36,1) 0.65s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .masthead img {
    animation-duration: 0.01s !important;
    animation-delay: 0s !important;
  }
}

/* ==========================================================================
   Content card (overrides Bootstrap .card)
   ========================================================================== */
.brand-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(185, 138, 47, 0.25);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(125, 40, 30, 0.14);
}

.form-card {
  opacity: 0;
  animation: riseFade 0.9s cubic-bezier(.22,1,.36,1) 0.15s forwards;
}

.thankyou-card {
  opacity: 0;
  animation: riseFade 0.8s cubic-bezier(.22,1,.36,1) 0.2s forwards;
}

.brand-title {
  color: #9d1c20;
  letter-spacing: 0.02em;
}

.subtitle {
  color: #7a6a58;
  font-size: 0.95rem;
}

.subtitle-rule::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 0.9rem;
  border-radius: 2px;
  background: linear-gradient(90deg, #9d1c20, #b98a2f);
}

.req {
  color: #9d1c20;
}

/* ==========================================================================
   Form controls (override Bootstrap .form-control / .form-select)
   ========================================================================== */
.form-control,
.form-select {
  background-color: #fffdf9;
  border: 1.5px solid #e0d2bd;
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%239d1c20' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
}

  .form-control:focus,
  .form-select:focus {
    border-color: #b98a2f;
    box-shadow: 0 0 0 3px rgba(185, 138, 47, 0.18);
  }

.form-control::placeholder {
  color: #b3a48e;
}

.form-label {
  color: #2b2320;
  letter-spacing: 0.03em;
}

/* Privacy consent checkbox */
.form-check-input {
  border: 1.5px solid #cbb894;
}

  .form-check-input:checked {
    background-color: #9d1c20;
    border-color: #9d1c20;
  }

  .form-check-input:focus {
    border-color: #b98a2f;
    box-shadow: 0 0 0 3px rgba(185, 138, 47, 0.18);
  }

.form-check-label {
  color: #5f5346;
  font-size: 0.92rem;
}

  .form-check-label a {
    color: #9d1c20;
    text-decoration: underline;
  }

/* ---------- Dietary options (Bootstrap btn-check toggle buttons) ---------- */
.diet-btn {
  background: #fffdf9;
  border: 1.5px solid #e0d2bd;
  color: #2b2320;
  border-radius: 12px;
  padding: 0.85rem 0.75rem;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.2s;
}

  .diet-btn:hover {
    background: #fffdf9;
    border-color: #cbb894;
    color: #2b2320;
  }

.btn-check:checked + .diet-btn {
  border-color: #9d1c20;
  background: #fdf3f0;
  color: #9d1c20;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(157, 28, 32, 0.12);
}

.btn-check:focus-visible + .diet-btn {
  box-shadow: 0 0 0 3px rgba(185, 138, 47, 0.3);
}

/* ==========================================================================
   Brand buttons (extend Bootstrap .btn)
   ========================================================================== */
.btn-brand {
  color: #fff;
  background: linear-gradient(120deg, #9d1c20 0%, #7c1518 55%, #b98a2f 140%);
  border: none;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  box-shadow: 0 8px 22px rgba(157, 28, 32, 0.3);
  transition: transform 0.15s, box-shadow 0.15s;
}

  .btn-brand:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(157, 28, 32, 0.38);
  }

  .btn-brand:active {
    transform: translateY(0);
  }

.btn-outline-brand {
  color: #9d1c20;
  background: #fff;
  border: 1.5px solid #e0d2bd;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

  .btn-outline-brand:hover {
    color: #9d1c20;
    background: #fff;
    border-color: #b98a2f;
  }

.fine-print {
  font-size: 0.78rem;
  color: #98876f;
}

/* ==========================================================================
   Thank-you page
   ========================================================================== */
.ty-check {
  width: 68px;
  height: 68px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #9d1c20, #b98a2f);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(157, 28, 32, 0.28);
}

  .ty-check svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

.ty-title {
  color: #9d1c20;
  letter-spacing: 0.02em;
}

.ty-message {
  color: #5f5346;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 30rem;
}

  .ty-message strong {
    color: #2b2320;
  }

.ty-qr {
  display: inline-block;
  padding: 1.1rem 1.1rem 0.9rem;
  border: 1.5px dashed #d9c3a0;
  border-radius: 14px;
  background: #fffdf9;
  margin-bottom: 1.6rem;
}

#qrcode {
  width: 180px;
  height: 180px;
  margin: 0 auto 0.8rem;
}

  #qrcode img,
  #qrcode canvas {
    display: block;
    margin: 0 auto;
  }

.ty-ref {
  font-size: 0.9rem;
  color: #2b2320;
  margin-bottom: 0.25rem;
}

  .ty-ref strong {
    color: #9d1c20;
    letter-spacing: 0.03em;
  }

.ty-hint {
  font-size: 0.8rem;
  color: #98876f;
  max-width: 16rem;
  margin: 0 auto;
  line-height: 1.45;
}

/* ==========================================================================
   Responsive — masthead rebalance for small screens
   ========================================================================== */
@media (max-width: 640px) {
  .masthead {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    border-radius: 0;
    aspect-ratio: 4 / 3;
  }

  .mh-top-left {
    width: 44%;
    top: -24%;
    left: -15%;
  }

  .mh-top-right {
    width: 26%;
    top: -13%;
    right: -14%;
  }

  .mh-logo {
    width: 30%;
    top: 4%;
    right: 4%;
  }

  .mh-middle {
    width: 78%;
    top: 40%;
    margin-left: -29%;
  }

  .mh-bottom-left {
    width: 62%;
    bottom: -75%;
    left: -38%;
  }

  .mh-bottom-right {
    width: 38%;
    bottom: -28%;
    right: -13%;
  }

  .mh-text-bottom {
    width: 94%;
    bottom: 3%;
    margin-left: -47%;
  }
}

@media (max-width: 575.98px) {
  .ty-actions .btn {
    width: 100%;
  }
}

/* ==========================================================================
   Print / Save as PDF (thank-you page)
   ========================================================================== */
@media print {
  body {
    background: #fff !important;
  }

  .no-print {
    display: none !important;
  }

  .container {
    padding: 0;
  }

  .masthead {
    max-width: 440px;
    margin: 0 auto 14px;
    box-shadow: none;
    border-radius: 0;
  }

    .masthead img {
      opacity: 1 !important;
      animation: none !important;
      transform: none !important;
      translate: none !important;
    }

  .thankyou-card {
    opacity: 1 !important;
    animation: none !important;
    box-shadow: none;
    border: 1px solid #e0d2bd;
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .ty-check, .ty-qr {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}