@font-face { 
  font-family: 'BROMO'; 
  src: url('/static/fonts/bromo.ttf') format('truetype'),
       url('/static/bromo.ttf') format('truetype'); /* fallback path */
}

:root { 
  --outline-orange: #ff6600; 
  --willie-text: #2b2b2b; 
  --willie-accent: #f68b1e; 
}

* { 
  box-sizing: border-box; 
}

body { 
  margin: 0; 
  background: #fff; 
  font-family: 'BROMO', sans-serif; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
}

.willie-title { 
  font-size: 77px; 
  color: #d3d9e4; 
  letter-spacing: 2px; 
  transform: scaleY(0.95);
  text-shadow: -4px -4px 0 black, 4px -4px 0 black, -4px 4px 0 black, 4px 4px 0 black, 7px 7px 0 var(--outline-orange);
  margin-top: 40px; 
  margin-bottom: 0; 
}

.hero-image { 
  width: 45vw; 
  max-width: 100%; 
  height: auto; 
  margin-top: 5px; 
  margin-bottom: 10px; 
}

.willie-subtitle { 
  font-size: 48px; 
  color: #d3d9e4; 
  letter-spacing: 2px; 
  transform: scaleY(0.95);
  text-shadow: -3px -3px 0 black, 3px -3px 0 black, -3px 3px 0 black, 3px 3px 0 black, 5px 5px 0 var(--outline-orange);
  margin-top: 0; 
  margin-bottom: 6px; 
}

/* ===== Top quick-access (email) – SMALL + centered ===== */
.top-access{ 
  margin: 6px 0 6px; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 6px; 
}

.top-access .topline{ 
  display: grid; 
  grid-template-columns: 1fr auto 1fr; 
  align-items: center; 
  justify-items: center; 
  gap: 16px; 
}

.top-access .signin-label, .top-access .hint{
  font-family: 'BROMO', sans-serif; 
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 28px);
  color: #d3d9e4; 
  transform: scaleY(0.95); 
  letter-spacing: 1px;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 2px 2px 0 #ff6600;
}

#qa_email{
  grid-column: 2;
  width: min(60vw, 280px);
  padding: 10px 12px;
  font-size: 18px;
}

.qa-msg{ 
  width: min(90vw, 520px); 
  font-size: 18px; 
  color: #111; 
  text-shadow: none; 
  min-height: 20px; 
  text-align: center; 
}
.qa-msg.ok{ color: #116611; } 
.qa-msg.warn{ color: #9a6b00; } 
.qa-msg.err{ color: #b00020; }

/* Skit frame - RESTORED HOMEPAGE BORDER */
.skit-section{ 
  margin-top: 6px; 
  margin-bottom: 20px; 
  text-align: center; 
}

.skit-frame{ 
  display: inline-block; 
  background: #faf8f2; 
  border: none; 
  padding: 8px; 
  max-width: min(72vw, 720px); 
}

.skit-frame img{ 
  display: block; 
  width: 100%; 
  height: auto; 
  object-fit: contain; 
}

/* Generic form looks */
.willie-formline{ 
  font-size: 26px; 
  color: #d3d9e4; 
  transform: scaleY(0.95);
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black, 2px 2px 0 var(--outline-orange); 
}

form input, .join-button { 
  display: block; 
  margin: 6px 0; 
  padding: 10px 12px; 
  font-size: 18px; 
  width: min(90vw, 360px); 
}

.join-button { 
  font-family: 'BROMO', sans-serif; 
  color: #d3d9e4; 
  letter-spacing: 2px; 
  background: var(--outline-orange); 
  border: 3px solid black;
  text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black, 2px 2px 0 black, 2px 2px 0 var(--outline-orange); 
  cursor: pointer; 
}

.feedback { 
  font-size: 19px; 
  color: #111; 
  text-shadow: none; 
  width: min(90vw, 420px); 
  min-height: 20px; 
  margin-top: -2px; 
  margin-bottom: 6px; 
  line-height: 1.4; 
}
.feedback.ok { color: #116611; } 
.feedback.err { color: #b00020; }

.menu { 
  font-size: 29px; 
  color: #d3d9e4; 
  margin-top: 20px; 
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black, 2px 2px 0 var(--outline-orange); 
  margin-bottom: 12px; 
}

.willie-footer { 
  text-align: center; 
  margin-top: 24px; 
}

#site-footer .legal-nav,
#site-footer .legal-nav a,
#site-footer .legal-nav a:visited {
  color: #d3d9e4;
  text-decoration: none;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 2px 2px 0 #ff6600;
}

/* Admin hotspot (tiny invisible link) */
.admin-hotspot {
  font-size: 1px;
  color: transparent;
  text-decoration: none;
}

/* Responsive tweaks */
@media (max-width: 768px){
  .hero-image{ width: 70vw; }
  .top-access .topline{ grid-template-columns: 1fr; }
  .top-access .signin-label, .top-access .hint{ font-size: clamp(20px, 4.8vw, 26px); }
  #qa_email{ width: min(80vw, 320px); }
}

@media (max-width: 480px){
  .hero-image{ width: 90vw; }
}

/* ========================================
   MOBILE OPTIMIZATIONS - PHONE FRIENDLY
   Surgical fix for gift button placement
   ======================================== */

@media (max-width: 768px) {
  
  /* Hide the "NEW? SIGN UP BELOW" hint on mobile only */
  .top-access .hint {
    display: none;
  }
  
  /* Reorder PayPal buttons within their container */
  .signup-with-paypal {
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
  }
  
  /* Form comes first */
  .signup-form-center {
    order: 1;
  }
  
  /* Gift button comes after form */
  .paypal-side-button:first-child {
    order: 2;
    transform: none !important; /* Remove desktop transform */
  }
  
  /* Club Willie button comes last */
  .paypal-side-button:last-child {
    order: 3;
  }
  
  /* Make buttons smaller on mobile */
  .paypal-side-button img {
    max-width: 180px !important;
    height: auto !important;
  }
  
  /* Stack buttons with proper spacing */
  .paypal-side-button {
    margin: 10px 0 !important;
  }
  
  /* Make all touch targets iOS-friendly */
  button,
  .join-button,
  input[type="submit"] {
    min-height: 44px;
    padding: 12px 20px;
  }
  
  /* Prevent iOS zoom on input focus */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea {
    font-size: 16px;
  }
  
  /* Form inputs full width on mobile */
  form input {
    width: 100%;
    max-width: 350px;
  }
}

/* Extra small phones */
@media (max-width: 480px) {
  
  /* Even smaller buttons on tiny screens */
  .paypal-side-button img {
    max-width: 150px !important;
  }
  
  /* Adjust title sizes */
  .willie-title {
    font-size: 48px;
  }
  
  .willie-subtitle {
    font-size: 32px;
  }
}