/*
Theme Name: Orange Justice
Theme URI: https://glasshousedistribution.com/movies/orange-justice/
Author: Orange Justice
Author URI: https://www.imdb.com/title/tt36744380/
Description: A warm, family-friendly single-page promotional theme for the film "Orange Justice." Every section — poster, trailer, synopsis, cast, stills, pre-order links and the email signup — is editable from Appearance > Customize. No coding required.
Version: 1.3.1
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: orange-justice
*/

:root{
  --cream:#FFF6EA;
  --cream-deep:#FBE8CF;
  --white:#FFFFFF;
  --orange:#E27D2C;
  --orange-deep:#C8612A;
  --navy:#1F3A5F;
  --navy-soft:#33507A;
  --ink:#4A4540;
  --yellow:#F6C45A;
  --shadow:0 14px 36px rgba(31,58,95,.14);
  --shadow-sm:0 6px 18px rgba(31,58,95,.10);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.brand{font-family:'Poppins',sans-serif;color:var(--navy);line-height:1.2;}
a{color:var(--orange-deep);}
img{max-width:100%;display:block;}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}
.section{padding:84px 0;}
.eyebrow{
  font-family:'Poppins',sans-serif;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;font-size:.78rem;color:var(--orange-deep);
  margin-bottom:14px;
}
h2{font-size:2.1rem;font-weight:800;margin-bottom:8px;}
.lead{font-size:1.12rem;max-width:660px;}

/* ---------- nav ---------- */
.oj-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,246,234,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--cream-deep);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;max-width:1080px;margin:0 auto;}
.brand{font-weight:800;font-size:1.15rem;letter-spacing:.02em;color:var(--navy);
  text-decoration:none;}
.brand span{color:var(--orange-deep);}
.nav-links{display:flex;gap:26px;align-items:center;}
.nav-links a{font-family:'Poppins',sans-serif;font-weight:600;font-size:.92rem;
  color:var(--navy-soft);text-decoration:none;}
.nav-links a:hover{color:var(--orange-deep);}
.btn{
  display:inline-block;font-family:'Poppins',sans-serif;font-weight:700;
  text-decoration:none;border:none;cursor:pointer;border-radius:999px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn-primary{
  background:linear-gradient(135deg,var(--orange),var(--orange-deep));
  color:#fff;padding:13px 26px;font-size:.95rem;
  box-shadow:0 8px 20px rgba(200,97,42,.34);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(200,97,42,.42);}
.btn-ghost{
  background:transparent;color:var(--navy);padding:12px 24px;font-size:.95rem;
  border:2px solid var(--navy);
}
.btn-ghost:hover{background:var(--navy);color:#fff;}
.btn-sm{padding:9px 18px;font-size:.85rem;}
@media(max-width:760px){.nav-links a:not(.btn){display:none;}}

/* ---------- hero ---------- */
.hero{
  background:
    radial-gradient(900px 420px at 82% -8%, rgba(246,196,90,.55), transparent 60%),
    radial-gradient(700px 480px at 6% 102%, rgba(226,125,44,.22), transparent 60%),
    var(--cream);
  padding:78px 0 86px;
  overflow:hidden;
}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;}
.badges{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px;}
.badge{
  background:var(--white);border:1px solid var(--cream-deep);
  border-radius:999px;padding:6px 14px;font-size:.8rem;font-weight:700;
  font-family:'Poppins',sans-serif;color:var(--navy-soft);
  box-shadow:var(--shadow-sm);
}
.badge b{color:var(--orange-deep);}
h1.title{
  font-size:4.1rem;font-weight:800;letter-spacing:-.01em;
  color:var(--orange-deep);line-height:1.02;margin-bottom:6px;
}
.title-sub{font-family:'Poppins',sans-serif;font-weight:700;
  font-size:1.35rem;color:var(--navy);margin-bottom:18px;}
.hero-logline{font-size:1.2rem;max-width:520px;margin-bottom:14px;color:var(--ink);}
.hero-meta{font-family:'Poppins',sans-serif;font-weight:600;font-size:.92rem;
  color:var(--navy-soft);margin-bottom:26px;}
.hero-meta b{color:var(--orange-deep);}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;}
.hero-note{font-size:.85rem;color:var(--navy-soft);margin-top:14px;}

/* image frame / placeholder */
.img-frame{position:relative;border-radius:16px;overflow:hidden;background:var(--cream-deep);}
.img-frame img{width:100%;height:100%;object-fit:cover;display:block;}
.img-label{
  display:none;position:absolute;inset:0;
  align-items:center;justify-content:center;text-align:center;
  font-family:'Poppins',sans-serif;font-weight:700;font-size:.82rem;
  color:var(--navy-soft);padding:18px;
  background:repeating-linear-gradient(45deg,#FBE8CF,#FBE8CF 14px,#F5DCBC 14px,#F5DCBC 28px);
}
.img-frame.img-missing .img-label{display:flex;}
.img-frame.img-missing{border:2px dashed #D9A86B;}

.poster{aspect-ratio:2/3;box-shadow:var(--shadow);border-radius:18px;transform:rotate(2deg);}
.poster .img-frame{height:100%;}

/* ---------- trailer ---------- */
.trailer-box{
  position:relative;border-radius:18px;overflow:hidden;
  box-shadow:var(--shadow);background:#000;aspect-ratio:16/9;
}
.trailer-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ---------- feature cards ---------- */
.features{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:38px;}
.feature{
  background:var(--white);border-radius:16px;padding:28px;
  box-shadow:var(--shadow-sm);border:1px solid var(--cream-deep);
}
.feature .ic{
  width:48px;height:48px;border-radius:12px;display:flex;
  align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:14px;
  background:linear-gradient(135deg,var(--yellow),var(--orange));
}
.feature h3{font-size:1.15rem;margin-bottom:6px;}
.feature p{font-size:.98rem;}

/* ---------- story ---------- */
.story{background:var(--navy);color:#F4ECDF;}
.story h2,.story h3{color:#fff;}
.story .eyebrow{color:var(--yellow);}
.split{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;}
.story p{margin-bottom:14px;color:#E4DACA;}
.pull{
  border-left:4px solid var(--orange);padding:6px 0 6px 20px;
  font-family:'Poppins',sans-serif;font-style:normal;font-weight:600;
  font-size:1.16rem;color:#fff;margin:20px 0;
}
.story .img-frame{aspect-ratio:4/3;border-radius:16px;box-shadow:var(--shadow);}

/* ---------- cast ---------- */
.cast-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:38px;}
.cast-card{text-align:center;}
.cast-card .img-frame{aspect-ratio:1/1;border-radius:50%;width:150px;margin:0 auto 14px;
  box-shadow:var(--shadow-sm);}
.cast-card .nm{font-family:'Poppins',sans-serif;font-weight:700;color:var(--navy);font-size:1.02rem;}
.cast-card .rl{font-size:.9rem;color:var(--orange-deep);font-weight:700;}
.crew-line{text-align:center;margin-top:34px;font-family:'Poppins',sans-serif;
  font-weight:600;color:var(--navy-soft);font-size:.95rem;}

/* ---------- stills ---------- */
.stills{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px;}
.stills .img-frame{aspect-ratio:16/10;border-radius:14px;box-shadow:var(--shadow-sm);}

/* ---------- CTA / VOD platform buttons ---------- */
.cta{
  background:
    radial-gradient(700px 360px at 100% 0%, rgba(246,196,90,.5), transparent 62%),
    linear-gradient(135deg,var(--orange),var(--orange-deep));
  color:#fff;text-align:center;
}
.cta h2{color:#fff;font-size:2.4rem;}
.cta .lead{color:#FFF1DD;margin:10px auto 0;}

.form-card{
  background:var(--white);color:var(--ink);border-radius:18px;
  max-width:560px;margin:38px auto 0;padding:32px;box-shadow:var(--shadow);
}
.form-card h3{font-size:1.25rem;margin-bottom:4px;}
.form-card p.sm{font-size:.92rem;color:var(--navy-soft);margin-bottom:18px;}
.form-row{display:flex;gap:10px;}
.form-row input{
  flex:1;padding:13px 16px;border:2px solid var(--cream-deep);border-radius:999px;
  font-family:'Nunito',sans-serif;font-size:.98rem;color:var(--ink);
}
.form-row input:focus{outline:none;border-color:var(--orange);}
.form-msg{margin-top:14px;font-weight:700;font-family:'Poppins',sans-serif;
  color:var(--orange-deep);display:none;}

/* Prominent VOD platform buttons — the primary CTA post-release. */
.preorder-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:16px;
  max-width:840px;
  margin:38px auto 6px;
  padding:0 8px;
}
.platform-pill{
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--navy);
  border:2px solid #fff;border-radius:14px;
  padding:20px 22px;
  font-family:'Poppins',sans-serif;font-weight:800;font-size:1.05rem;
  letter-spacing:.01em;
  text-decoration:none;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  min-height:64px;
  text-align:center;
  line-height:1.1;
}
.platform-pill::before{
  content:"▶";
  display:inline-block;
  margin-right:10px;
  color:var(--orange-deep);
  font-size:.9em;
  font-weight:900;
}
.platform-pill:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 30px rgba(0,0,0,.24);
  background:var(--cream);
}
.watch-note{
  font-size:.9rem;color:#FFE9CE;margin-top:14px;
  font-family:'Poppins',sans-serif;font-weight:600;
}

/* ---------- footer ---------- */
.oj-footer{background:var(--navy);color:#C7D2E2;padding:48px 0 30px;text-align:center;}
.oj-footer .brand{color:#fff;font-size:1.3rem;margin-bottom:10px;display:inline-block;}
.oj-footer .fmeta{font-size:.9rem;margin-bottom:16px;}
.social{display:flex;gap:18px;justify-content:center;margin-bottom:20px;}
.social a{color:#C7D2E2;text-decoration:none;font-family:'Poppins',sans-serif;
  font-weight:600;font-size:.9rem;}
.social a:hover{color:var(--yellow);}
.copyright{font-size:.8rem;color:#7E91AB;padding-top:18px;
  border-top:1px solid #34507A;}

/* ---------- responsive ---------- */
@media(max-width:860px){
  .hero-grid,.split{grid-template-columns:1fr;gap:34px;}
  .poster{max-width:300px;margin:0 auto;transform:rotate(0);}
  .features,.cast-grid,.stills{grid-template-columns:1fr 1fr;}
  h1.title{font-size:3rem;}
  h2{font-size:1.7rem;}
  .cta h2{font-size:1.8rem;}
  .section{padding:60px 0;}
}
@media(max-width:520px){
  .features,.cast-grid,.stills{grid-template-columns:1fr;}
  .form-row{flex-direction:column;}
  .form-row .btn{width:100%;}
  h1.title{font-size:2.5rem;}
}