/* =====================================================================
   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:var(--cape-orange); margin:.4rem 0 .5rem; letter-spacing:3px; text-shadow:0 0 40px rgba(255,107,53,.3); }
.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; } }

/* =====================================================================
   AFROCATION - mobile hardening v2
   Cuts dead vertical space, scales down the big headings, and removes
   the blank button from the mobile pop-out menu.
   ===================================================================== */

/* never let the big hero title push past the screen edge */
.emileyx-hero-title{ overflow-wrap:break-word; word-break:normal; }
.emileyx-hero, .emileyx-stats-section, .emileyx-about-section{ overflow-x:hidden; }

/* remove the empty "account" link so the menu has no blank button (logged-out) */
#nav-account:empty{ display:none !important; }
.emileyx-nav-links a:empty, .emileyx-nav-overlay a:empty{ display:none !important; }

/* Tablets and down */
@media (max-width:820px){
  .emileyx-hero{ min-height:auto !important; padding:4rem 1.5rem 3rem !important; }
  .emileyx-hero-title{ font-size:clamp(2.6rem,10vw,4rem) !important; letter-spacing:1px !important; line-height:1.04 !important; }
  .emileyx-hero-subtitle{ font-size:1rem !important; max-width:560px; margin:1rem auto 0; }
  .emileyx-section-title, .section-title{ font-size:clamp(1.8rem,6.5vw,2.6rem) !important; letter-spacing:1px !important; }
  .emileyx-stats-section{ padding:2.5rem 1.25rem !important; }
  .emileyx-about-section{ padding:2.5rem 1.25rem 1.25rem !important; }
}

/* Phones: kill the airy gaps, shrink headings, single-column */
@media (max-width:600px){
  .emileyx-hero{ min-height:auto !important; padding:3.25rem 1.15rem 2.5rem !important; }
  .emileyx-hero-kicker{ font-size:.7rem !important; letter-spacing:1.5px !important; margin-bottom:.75rem !important; }
  .emileyx-hero-title{ font-size:clamp(2.2rem,12vw,3.2rem) !important; letter-spacing:.5px !important; }
  .emileyx-hero-subtitle{ font-size:.94rem !important; line-height:1.5 !important; }
  .emileyx-hero-stats{ font-size:.7rem !important; line-height:1.5 !important; margin-top:1rem !important; }
  .emileyx-cta-buttons{ flex-wrap:wrap; gap:.6rem !important; justify-content:center; margin-top:1.25rem !important; }
  .emileyx-cta-buttons .emileyx-btn{ flex:1 1 auto; min-width:150px; text-align:center; justify-content:center; }

  .emileyx-stats-section{ padding:2rem 1rem !important; }
  .emileyx-about-section{ padding:2rem 1rem .75rem !important; }
  .emileyx-cards-grid{ gap:1rem !important; }
  .emileyx-culture-card{ padding:1.4rem 1.3rem !important; }
  .emileyx-card-description{ font-size:.9rem !important; line-height:1.5 !important; }

  .eyx-join{ padding:2.25rem 1.1rem !important; }
  .eyx-drops{ padding:2.25rem 1.1rem !important; }
  #contact.content-section{ padding:2.25rem 1rem !important; }

  /* headings sized for phones (includes the contact 'section-title') */
  .emileyx-section-title, .section-title{ font-size:clamp(1.7rem,7vw,2.3rem) !important; line-height:1.12 !important; letter-spacing:.5px !important; }
  .eyx-join h2{ font-size:clamp(1.9rem,9vw,2.8rem) !important; letter-spacing:1.5px !important; }
  .eyx-drops h2{ font-size:clamp(1.9rem,9vw,2.8rem) !important; letter-spacing:1.5px !important; }
  .eyx-contact-sub, .eyx-drops-sub, .eyx-join-sub{ font-size:.9rem !important; margin-bottom:1.5rem !important; }
}

/* Very small phones (<=360px) */
@media (max-width:360px){
  .emileyx-hero-title{ font-size:2rem !important; }
  .emileyx-hero{ padding-left:.9rem !important; padding-right:.9rem !important; }
  .emileyx-cta-buttons .emileyx-btn{ min-width:0; width:100%; }
}

/* --- Stats: heading + 2-up stretched cards on phones ---
   Higher-specificity selectors (.emileyx-stats-section .emileyx-stats-grid) so they
   beat the page's inline CSS regardless of load order. The lone 5th card spans full width. */
.emileyx-stats-section .emileyx-section-title{ margin-bottom:1.75rem; }
@media (max-width:599px){
  .emileyx-stats-section{ padding:2.25rem 1rem !important; }
  .emileyx-stats-section .emileyx-stats-grid{ grid-template-columns:1fr 1fr !important; gap:.8rem !important; max-width:100% !important; }
  .emileyx-stats-section .emileyx-stat-card{ padding:1.4rem 1rem !important; }
  .emileyx-stats-section .emileyx-stat-card:nth-child(5){ grid-column:1 / -1 !important; }
  .emileyx-stats-section .emileyx-stat-number{ font-size:2.3rem !important; margin-bottom:.35rem !important; }
  .emileyx-stats-section .emileyx-stat-label{ font-size:.68rem !important; letter-spacing:.7px !important; }
}
@media (max-width:360px){
  .emileyx-stats-section .emileyx-stats-grid{ gap:.55rem !important; }
  .emileyx-stats-section .emileyx-stat-card{ padding:1.1rem .75rem !important; }
  .emileyx-stats-section .emileyx-stat-number{ font-size:2rem !important; }
}

/* ===================== AFFILIATIONS / BOARDS LOGO STRIP ===================== */
.eyx-partners{ padding:3.5rem 2rem; text-align:center; border-top:1px solid rgba(255,255,255,.06); }
.eyx-partners h2{ font-family:'Bebas Neue', Impact, sans-serif; font-size:clamp(2.5rem,6vw,4rem); color:var(--cape-orange); letter-spacing:3px; margin:0 0 .6rem; text-shadow:0 0 40px rgba(255,107,53,.3); }
.eyx-partners-sub{ color:var(--text-muted); max-width:760px; margin:0 auto 2rem; font-size:1rem; line-height:1.6; }
.eyx-partner-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1.1rem; max-width:1200px; margin:0 auto; align-items:stretch;
}
.eyx-partner{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:110px; padding:1rem 1.25rem;
  background:rgba(255,255,255,.94); border:1px solid rgba(255,255,255,.15); border-radius:12px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.eyx-partner:hover{ transform:translateY(-4px); box-shadow:0 12px 26px rgba(0,0,0,.35); }
.eyx-partner img{ max-width:100%; max-height:100%; width:auto; object-fit:contain; display:block; }
@media (max-width:600px){
  .eyx-partners{ padding:2.5rem 1rem; }
  .eyx-partners h2{ font-size:clamp(1.9rem,9vw,2.8rem); letter-spacing:1.5px; }
  .eyx-partner-grid{ grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:.8rem; }
  .eyx-partner{ height:88px; padding:.8rem; }
}

/* --- Keep ALL card sections the same width, stretched, on phones ---
   Removes the per-grid max-width caps and normalizes side padding so the
   plans, drops and stats cards all line up to the same content width. */
@media (max-width:600px){
  .emileyx-stats-section, .emileyx-about-section, .eyx-join, .eyx-drops, #contact.content-section{
    padding-left:1rem !important; padding-right:1rem !important;
  }
  .emileyx-stats-section .emileyx-stats-grid{ max-width:100% !important; }
  .eyx-plan-grid{ max-width:100% !important; grid-template-columns:1fr !important; }
  .eyx-drop-grid{ max-width:100% !important; grid-template-columns:1fr 1fr !important; }
  .eyx-contact-wrap{ max-width:100% !important; }
}

/* =====================================================================
   DESKTOP refinement (>=900px): trim dead space + consistent text sizes
   Scoped to desktop so it never touches the mobile rules above.
   ===================================================================== */
@media (min-width:900px){
  /* one consistent secondary-text size everywhere (matches the drops sub,
     which reads well); shrinks the oversized culture-card descriptions */
  .emileyx-card-description{ font-size:1rem !important; line-height:1.6 !important; }
  .eyx-join .eyx-join-sub,
  .eyx-drops .eyx-drops-sub,
  .eyx-contact-sub{ font-size:1rem !important; line-height:1.6 !important; }

  /* less vertical dead space between sections */
  .emileyx-stats-section{ padding:2.75rem 2rem !important; }
  .emileyx-about-section{ padding:2.75rem 2rem !important; }
  .eyx-join{ padding:3rem 2rem !important; }
  .eyx-drops{ padding:3rem 2rem !important; }
  #contact.content-section, .content-section#contact{ padding:3rem 2rem !important; }

  /* tighten heading-to-content and grid-bottom gaps */
  .emileyx-stats-section .emileyx-section-title{ margin-bottom:1.75rem !important; }
  .eyx-join h2{ margin-bottom:.35rem !important; }
  .eyx-join .eyx-join-sub{ margin-bottom:1.5rem !important; }
  .eyx-plan-grid{ margin-bottom:.5rem !important; }
  .eyx-drops .eyx-drops-sub{ margin-bottom:1.5rem !important; }
}

/* --- Centre the "What we bring" contact intro on mobile (single column) ---
   The list is set to inline-block so it stays left-aligned internally while the
   whole block (heading, bullets, badge) centres on the page. */
@media (max-width:820px){
  .eyx-contact-intro{ text-align:center !important; }
  .eyx-contact-intro h3{ text-align:center !important; }
  .eyx-contact-intro ul{ display:inline-block; text-align:left; margin:0 auto 1.5rem !important; }
}

/* --- Mobile pop-out menu: clean, professional, buttons stuck together ---
   The menu is the .emileyx-nav-links panel (.active toggled by EmileyxNav). The
   "MENU" title and "tap to close" line are pseudo-elements, so we reserve top and
   bottom room for them, then turn the glowing pills into one flush divided list. */
@media (max-width:768px){
  .emileyx-nav-links.active{
    padding:4.75rem 1.1rem 3.25rem !important;   /* clear the title (top) + close line (bottom) */
    gap:0 !important;
    row-gap:0 !important;
    justify-content:flex-start !important;
    align-items:stretch !important;
  }
  .emileyx-nav-links.active .emileyx-nav-link{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:1rem 1rem !important;
    font-size:1rem !important;
    letter-spacing:1.5px !important;
    text-align:center !important;
    color:#fff !important;
    background:transparent !important;
    border:0 !important;
    border-bottom:1px solid rgba(255,255,255,.1) !important;
    border-radius:0 !important;
    box-shadow:none !important;
    min-height:0 !important;
    line-height:1.25 !important;
    transition:background .2s ease, color .2s ease !important;
  }
  .emileyx-nav-links.active .emileyx-nav-link:first-of-type{ border-top:1px solid rgba(255,255,255,.1) !important; }
  .emileyx-nav-links.active .emileyx-nav-link:last-of-type{ border-bottom:0 !important; }
  .emileyx-nav-links.active .emileyx-nav-link:hover,
  .emileyx-nav-links.active .emileyx-nav-link.active{
    background:rgba(255,215,0,.1) !important;
    color:var(--cape-gold) !important;
  }
}