/*
Theme Name: FMC — Fashion Models Collective
Theme URI: https://fashionmodelscollective.com
Author: FMC
Description: Custom theme for Fashion Models Collective. Two-role platform (Talent & Brand). Clean rebuild — landing page, apply flows, dashboard, community.
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: fmc
*/

:root{
  --bg:#000;
  --fg:#ffffff;
  --muted:rgba(255,255,255,0.55);
  --line:rgba(255,255,255,0.14);
  --panel:rgba(255,255,255,0.04);
  --panel-hover:rgba(255,255,255,0.08);
  --font:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--fg);font-family:var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* ---------- HERO WRAPPER ---------- */
.hero{position:relative;min-height:100vh;width:100%;overflow:hidden;display:flex;flex-direction:column}

/* Background video + fallback */
.bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(100%) contrast(1.05) brightness(1.0);z-index:1}
/* Mobile-only vertical clip (hidden on desktop) — enabled in the mobile query below. */
.bg-video-m{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(100%) contrast(1.05) brightness(1.0);z-index:1;display:none}
.bg-fallback{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 90% at 78% 38%, rgba(70,70,70,0.55) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(180deg,#0a0a0a 0%, #000 100%);}
.bg-overlay{position:absolute;inset:0;z-index:2;
  background:linear-gradient(90deg, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.7) 32%, rgba(0,0,0,0.18) 62%, rgba(0,0,0,0.12) 100%);}

/* ---------- NAV ---------- */
/* Logo + menu sit together on the LEFT; Log In is pushed to the right. */
header.site-header{position:relative;z-index:3;display:flex;align-items:center;justify-content:flex-start;
  gap:44px;padding:32px 56px}
.logo{font-size:30px;font-weight:700;letter-spacing:0.02em}
nav.site-nav{display:flex;gap:44px;align-items:center}
.site-header .btn-login{margin-left:auto}
nav.site-nav a{font-size:13px;letter-spacing:0.18em;color:var(--muted);text-transform:uppercase;font-weight:500;
  padding-bottom:4px;transition:color .2s}
nav.site-nav a:hover{color:var(--fg)}
nav.site-nav a.active{color:var(--fg);border-bottom:1px solid var(--fg)}
.btn-login{font-size:13px;letter-spacing:0.18em;text-transform:uppercase;color:var(--fg);
  border:1px solid var(--line);padding:13px 30px;border-radius:30px;transition:all .2s;background:transparent}
.btn-login:hover{background:var(--fg);color:#000}

/* ---------- HERO CONTENT ---------- */
.hero-inner{position:relative;z-index:3;flex:1;display:flex;align-items:center;justify-content:space-between;
  gap:48px;padding:10px 56px 40px}
.hero-content{max-width:620px;flex:1 1 auto}
.eyebrow{font-size:12px;letter-spacing:0.34em;text-transform:uppercase;color:var(--muted);margin-bottom:26px}
h1.hero-title{font-size:84px;line-height:0.96;font-weight:700;letter-spacing:-0.02em;margin-bottom:28px}
.sub{font-size:18px;line-height:1.55;color:rgba(255,255,255,0.72);max-width:470px;margin-bottom:40px}

.apply-label{font-size:12px;letter-spacing:0.3em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.cards{display:flex;gap:18px;flex-wrap:wrap}
.card{flex:1;min-width:260px;background:var(--panel);border:1px solid var(--line);
  padding:28px 26px;backdrop-filter:blur(6px);transition:background .2s,border-color .2s}
.card:hover{background:var(--panel-hover);border-color:rgba(255,255,255,0.3)}
.card-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.card-icon{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.card-icon svg{width:20px;height:20px;stroke:var(--fg)}
.card-title{font-size:19px;font-weight:700;line-height:1.15}
.card p{font-size:14px;line-height:1.55;color:rgba(255,255,255,0.6);margin-bottom:24px}
.btn-apply{display:flex;align-items:center;justify-content:space-between;width:100%;
  background:var(--fg);color:#000;border:none;font-family:var(--font);font-size:13px;
  letter-spacing:0.18em;text-transform:uppercase;font-weight:600;padding:15px 20px;cursor:pointer;transition:opacity .2s}
.btn-apply:hover{opacity:0.82}
.btn-apply svg{width:18px;height:18px;stroke:#000}

.trust{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:13px;color:var(--muted)}
.trust svg{width:16px;height:16px;stroke:var(--muted);flex-shrink:0}

/* How FMC works panel */
.how-panel{flex:0 0 358px;align-self:center;background:rgba(255,255,255,0.05);
  border:1px solid var(--line);backdrop-filter:blur(9px);padding:30px 28px}
.how-eyebrow{font-size:11px;letter-spacing:0.28em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.how-title{font-size:22px;font-weight:700;letter-spacing:-0.01em;margin-bottom:22px}
.step{display:flex;gap:15px;padding:15px 0;border-top:1px solid var(--line)}
.step:first-of-type{border-top:none;padding-top:0}
.step-num{flex:0 0 30px;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:13px}
.step h5{font-size:15px;font-weight:700;margin-bottom:5px}
.step p{font-size:13px;line-height:1.5;color:rgba(255,255,255,0.6)}

/* ---------- FEATURE BAR ---------- */
.features{position:relative;z-index:3;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding:30px 56px;background:rgba(0,0,0,0.55)}
.feature{display:flex;gap:14px;align-items:flex-start}
.feature svg{width:26px;height:26px;stroke:var(--fg);flex-shrink:0;margin-top:2px}
.feature h4{font-size:12px;letter-spacing:0.16em;text-transform:uppercase;font-weight:700;margin-bottom:7px}
.feature p{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,0.55)}
.tagline{position:relative;z-index:3;text-align:center;padding:22px;font-size:13px;letter-spacing:0.34em;text-transform:uppercase;
  color:var(--muted);background:#000}

/* ---------- PAGE WRAPPER (dashboard / community / about / apply) ---------- */
.fmc-page{min-height:70vh;background:#000;color:#fff;padding:48px 56px 80px}
.fmc-page-inner{max-width:1100px;margin:0 auto}
@media(max-width:900px){.fmc-page{padding:28px 22px 60px}}
@media(max-width:560px){.fmc-page{padding:12px 0 56px}} /* full-bleed on phones — shortcodes keep their own inner padding */

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  header.site-header{padding:20px 24px;flex-wrap:wrap;gap:12px 22px}
  nav.site-nav{order:3;width:100%;display:flex;flex-wrap:wrap;gap:18px;justify-content:flex-start}
  nav.site-nav a{font-size:12px;letter-spacing:0.12em;padding-bottom:0}
  .site-header .btn-login{margin-left:auto;padding:10px 22px}
  .hero-inner{flex-direction:column;align-items:flex-start;gap:32px;padding:20px 24px 40px}
  .how-panel{flex:0 0 auto;width:100%;align-self:stretch}
  h1.hero-title{font-size:52px}
  .features{grid-template-columns:repeat(2,1fr);padding:28px 24px}
}
@media(max-width:560px){
  h1.hero-title{font-size:40px}
  .cards{flex-direction:column}
  .features{grid-template-columns:1fr}
  /* Mobile (OPTION 2): vertical clip fills the whole page (whole scene + soft blurred fill), text overlaid. */
  .bg-video{display:none}
  .bg-fallback{display:none}
  .bg-video-m{display:block;position:fixed;top:0;left:0;inset:auto;width:100vw;height:100vh;object-fit:cover;object-position:center}
  .bg-overlay{position:fixed;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.22) 0%,rgba(0,0,0,0.40) 50%,rgba(0,0,0,0.60) 100%)}
  .hero-title,.sub,.eyebrow,.apply-label,.site-header .logo,.site-nav a,.btn-login{text-shadow:0 2px 14px rgba(0,0,0,0.55)}
  .card{background:rgba(0,0,0,0.42)}
  .hero-inner{padding:16px 18px 34px;gap:26px}
  .sub{font-size:16px;margin-bottom:30px}
  .btn-apply{padding:18px 20px}
  .how-panel{padding:24px 20px}
  .tagline{font-size:11px;letter-spacing:0.24em;padding:18px}
  .feature p{font-size:13px}
}

/* ---------- FOOTER ---------- */
.site-footer{border-top:1px solid var(--line);background:#000;padding:40px 56px;position:relative;z-index:3}
.site-footer-inner{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:16px 40px}
.footer-logo{font-size:22px;font-weight:700;letter-spacing:0.02em}
.footer-nav{display:flex;flex-wrap:wrap;gap:22px}
.footer-nav a{font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);transition:color .2s}
.footer-nav a:hover{color:var(--fg)}
.footer-tag{margin-left:auto;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted)}
@media(max-width:640px){.site-footer{padding:30px 18px}.footer-tag{margin-left:0;width:100%}}