/* =====================================================================
   HOME PAGE IMPROVEMENTS  (add as a page CSS File URL or inline on the Home page)
   Load AFTER emileyx-theme.css. Pairs with home-improvements.html sections.
   Fixes: mobile auto-dark colour shift, contact-form sizing, empty space,
          emoji polish; adds the membership funnel + featured drops styling.
   ===================================================================== */

/* --- 1. Stop mobile browsers (Chrome "Auto dark theme", iOS) from re-tinting the site ---
   The site is already dark; declaring color-scheme tells the OS not to auto-invert it.
   ALSO add  <meta name="color-scheme" content="dark">  to the page HTML Header. */
html{ color-scheme: dark; }
:root{ color-scheme: dark; }
input, textarea, select, button{ color-scheme: dark; }

/* lock form field colours so dark-mode / autofill can't override them */
.form-input{
  background-color: rgba(255,255,255,.05) !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
  border:1px solid rgba(255,255,255,.16) !important;
}
.form-input::placeholder{ color:rgba(255,255,255,.42) !important; -webkit-text-fill-color:rgba(255,255,255,.42) !important; }
.form-input:-webkit-autofill{ -webkit-text-fill-color:#fff !important; transition:background-color 9999s ease-in-out 0s; }

/* --- 2. Contact form: smaller & tighter on desktop, comfortable on mobile --- */
#contact.content-section, .content-section#contact{ padding:3.5rem 2rem !important; }
#contact .section-title{ margin-bottom:.75rem !important; }
.eyx-contact-sub{ text-align:center; color:var(--text-muted); max-width:660px; margin:0 auto 2.5rem; font-size:1rem; }

/* two-column layout so the form is anchored, not floating in space */
.eyx-contact-wrap{ display:grid; grid-template-columns:.8fr 1.2fr; gap:2.5rem; max-width:1000px; margin:0 auto; align-items:start; }
.eyx-contact-intro{ padding-top:.5rem; }
.eyx-contact-intro h3{ font-family:'Bebas Neue',Impact,sans-serif; font-size:1.7rem; letter-spacing:1px; color:var(--cape-gold); margin:0 0 1rem; }
.eyx-contact-intro ul{ list-style:none; padding:0; margin:0 0 1.5rem; }
.eyx-contact-intro li{ color:#dfe2ea; padding:.42rem 0 .42rem 1.6rem; position:relative; font-size:.95rem; }
.eyx-contact-intro li:before{ content:'✦'; position:absolute; left:0; top:.5rem; color:var(--cape-orange); font-size:.8rem; }
.eyx-contact-badge{ display:inline-block; background:linear-gradient(135deg,rgba(255,107,53,.2),rgba(255,215,0,.14)); border:1px solid rgba(255,215,0,.3); color:var(--cape-gold); padding:.5rem 1rem; border-radius:30px; font-weight:700; font-size:.82rem; letter-spacing:.5px; }

.contact-form-container{
  max-width:none !important; margin:0 !important;
  padding:2rem 2rem 2.25rem !important; border-radius:16px !important; position:relative;
}
.contact-form-container::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px;
  border-radius:16px 16px 0 0; background:linear-gradient(90deg,var(--cape-orange),var(--cape-gold),var(--street-purple)); }

@media (max-width:820px){
  .eyx-contact-wrap{ grid-template-columns:1fr; gap:1.5rem; max-width:560px; }
  .eyx-contact-intro{ padding-top:0; }
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem !important; }
.form-group{ margin-bottom:1rem !important; }
.form-label{ font-size:.72rem !important; letter-spacing:1px !important; margin-bottom:.35rem !important; }
.form-input{ padding:.7rem .85rem !important; font-size:16px !important; border-radius:10px !important; }  /* 16px stops iOS zoom */
textarea.form-input{ min-height:110px !important; }
.submit-btn{ width:100% !important; padding:.85rem 1.4rem !important; font-size:.9rem !important; border-radius:12px !important; }

@media (max-width:600px){
  #contact.content-section{ padding:2.5rem 1rem !important; }
  .contact-form-container{ padding:1.25rem !important; border-radius:14px !important; }
  .form-grid{ grid-template-columns:1fr !important; gap:.25rem !important; }
  .form-input{ padding:.8rem .9rem !important; }                 /* bigger tap targets */
  .submit-btn{ padding:1rem 1.2rem !important; font-size:.95rem !important; }
  .eyx-join{ padding:3rem 1.25rem; }
  .eyx-drops{ padding:2.5rem 1.25rem; }
}

/* --- 3. Tighten section spacing so the page has less dead air (keep the theme's 2rem gutter) --- */
.emileyx-stats-section{ padding:3.5rem 2rem !important; }
.emileyx-about-section{ padding:3.5rem 2rem 2rem !important; border-top:1px solid rgba(255,255,255,.06) !important; }

/* --- 3b. Give each section its own band so they don't read as one long block
   (mirrors the theme's tinted stats + contact sections) --- */
.eyx-join{
  background:rgba(108,92,231,.07) !important;               /* subtle purple "join" band */
  border-top:1px solid rgba(255,255,255,.08) !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}
.eyx-drops{
  background:rgba(255,107,53,.03) !important;               /* faint orange band */
  border-bottom:1px solid rgba(255,107,53,.12) !important;
}

/* --- 4. Polish the emoji culture-card icons into gradient badges (keeps the emoji) --- */
.emileyx-card-icon{
  display:inline-flex !important; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:16px;
  background:linear-gradient(135deg, rgba(255,107,53,.25), rgba(255,215,0,.18)) !important;
  border:1px solid rgba(255,215,0,.28);
  box-shadow:0 8px 22px rgba(0,0,0,.35), inset 0 0 20px rgba(255,107,53,.12);
  font-size:1.9rem !important; line-height:1 !important; margin-bottom:1rem !important;
}
/* give the stat cards a tiny glow accent bar (fills the plain look) */
.emileyx-stat-card{ position:relative; }

/* ===================== MEMBERSHIP FUNNEL BAND ===================== */
.eyx-join{ padding:4rem 2rem; text-align:center; }
.eyx-join .eyx-join-kicker{ color:var(--cape-gold); font-weight:700; letter-spacing:2px; font-size:.85rem; text-transform:uppercase; }
/* match the theme's section-title scale so headings line up with the rest of the page */
.eyx-join h2{ font-family:'Bebas Neue', Impact, sans-serif; font-size:clamp(2.5rem,6vw,4rem); color:#fff; margin:.4rem 0 .5rem; letter-spacing:3px; text-shadow:0 0 30px rgba(255,215,0,.25); }
.eyx-join .eyx-join-sub{ color:var(--text-muted); max-width:640px; margin:0 auto 2rem; }
.eyx-plan-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.25rem; max-width:1000px; margin:0 auto 2rem; align-items:stretch; }
.eyx-plan{ background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:1.6rem 1.4rem; text-align:left; display:flex; flex-direction:column; }
.eyx-plan.hot{ border:2px solid var(--cape-orange); background:linear-gradient(180deg, rgba(255,107,53,.14), rgba(255,255,255,.05)); }
.eyx-plan .eyx-plan-badge{ font-size:.68rem; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--cape-orange); }
.eyx-plan .eyx-plan-name{ font-family:'Bebas Neue', Impact, sans-serif; font-size:1.6rem; letter-spacing:.5px; color:#fff; margin:.15rem 0 .1rem; }
.eyx-plan .eyx-plan-tag{ font-size:.76rem; color:var(--text-muted); margin:.05rem 0 .35rem; line-height:1.35; }
.eyx-plan .eyx-plan-price{ font-family:'Bebas Neue', Impact, sans-serif; font-size:2rem; color:var(--cape-gold); line-height:1; }
.eyx-plan .eyx-plan-price small{ font-family:'Inter',sans-serif; font-size:.8rem; color:var(--text-muted); font-weight:500; }
.eyx-plan ul{ list-style:none; padding:0; margin:.9rem 0 1rem; }
.eyx-plan li{ font-size:.85rem; color:#dfe2ea; padding:.28rem 0 .28rem 1.1rem; position:relative; }
.eyx-plan li:before{ content:'✦'; position:absolute; left:0; color:var(--cape-gold); font-size:.7rem; top:.45rem; }
/* per-plan CTA button, pinned to the bottom of the (equal-height) card */
.eyx-plan-btn{ margin-top:auto; display:block; text-align:center; text-decoration:none; padding:.65rem 1rem; border-radius:12px;
  font-weight:700; text-transform:uppercase; letter-spacing:.6px; font-size:.78rem;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,215,0,.3); color:var(--cape-gold); transition:all .2s ease; }
.eyx-plan-btn:hover{ background:var(--cape-gold); color:var(--deep-blue); text-decoration:none; transform:translateY(-2px); }
.eyx-plan-btn.hot{ background:linear-gradient(135deg,var(--cape-orange),var(--cape-red)); border-color:var(--cape-orange); color:#fff; }
.eyx-plan-btn.hot:hover{ box-shadow:0 10px 24px rgba(255,107,53,.4); color:#fff; }
.eyx-join-cta{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }

@media (max-width:820px){ .eyx-plan-grid{ grid-template-columns:1fr; max-width:400px; } }

/* ===================== FEATURED DROPS STRIP ===================== */
.eyx-drops{ padding:3.5rem 2rem; }
.eyx-drops h2{ font-family:'Bebas Neue', Impact, sans-serif; font-size:clamp(2.5rem,6vw,4rem); color:var(--cape-orange); text-align:center; letter-spacing:3px; margin:0 0 .5rem; text-shadow:0 0 40px rgba(255,107,53,.3); }
.eyx-drops .eyx-drops-sub{ color:var(--text-muted); text-align:center; max-width:620px; margin:0 auto 2rem; font-size:.95rem; }
.eyx-drop-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; max-width:1000px; margin:0 auto; }
.eyx-drop{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:14px; overflow:hidden; text-decoration:none; display:block; transition:transform .25s ease, border-color .25s ease; }
.eyx-drop:hover{ transform:translateY(-6px); border-color:var(--cape-orange); }
.eyx-drop .eyx-drop-cover{ aspect-ratio:1/1; width:100%; object-fit:cover; background:#1b2033; display:block; }
/* graceful fallback when a cover is missing/broken (span cover or img onerror adds .nocover) */
.eyx-drop span.eyx-drop-cover, .eyx-drop.nocover .eyx-drop-cover{ background:linear-gradient(135deg,var(--cape-orange),var(--street-purple)) !important; }
.eyx-drop .eyx-drop-body{ padding:.7rem .8rem .9rem; }
.eyx-drop .eyx-drop-title{ color:#fff; font-weight:600; font-size:.85rem; line-height:1.25; margin:0 0 .3rem; }
.eyx-drop .eyx-drop-tag{ font-size:.62rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase; padding:2px 7px; border-radius:20px; }
.eyx-drop .eyx-drop-tag.preview{ background:rgba(0,184,148,.18); color:var(--township-green); }
.eyx-drop .eyx-drop-tag.members{ background:rgba(255,215,0,.16); color:var(--cape-gold); }

@media (max-width:900px){ .eyx-drop-grid{ grid-template-columns:repeat(3,1fr); max-width:560px; } }
@media (max-width:560px){ .eyx-drop-grid{ grid-template-columns:repeat(2,1fr); max-width:360px; } }