/*
Theme Name: Alive Casting
Theme URI: https://alivecasting.com
Author: Alive Casting
Description: Custom theme for Alive Casting — Austin-area background talent casting vendor. Talent sign-up with Airtable-schema-matched intake form, password-gated client portal. Ported from the approved index.html / client-portal.html reference build.
Version: 1.0.0
Requires PHP: 8.0
Text Domain: alive-casting
*/

:root{
  --navy:#0B2340;
  --navy-deep:#081A30;
  --orange:#F17E20;
  --orange-dark:#D8681A;
  --cream:#FBFAF7;
  --line:#E4E0D8;
  --ink:#1C1C1C;
  --mono:'Courier New', Courier, monospace;
  --sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --script:'Permanent Marker', cursive;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:var(--sans);
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;}

/* ---- Topbar (shared, every page) ---- */
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:6px 32px;font-size:12px;letter-spacing:0.04em;color:#555;
  border-bottom:1px solid var(--line);
  font-family:var(--mono);
  background:#fff;
}

/* ---- Brand lockup ----
   The logo file itself is the full "alive CASTING" lockup (script wordmark +
   block label baked into one image) in two color variants — no separate
   coded text span. Two <img> tags sit in the same spot; CSS shows only the
   one that reads correctly against the header's current background. */
.brand{display:flex;align-items:center;line-height:1;}
.brand .logo{height:40px;width:auto;display:block;}
.brand .logo-on-light{display:none;}

/* ---- Header nav bar, every page, identical treatment ----
   Topbar + logo/nav row are both position:fixed, full width, pinned to the
   top of the viewport. Starts solid navy with white nav/logo everywhere
   (on Home this doubles as an overlay sitting on top of the hero photo);
   after ~400px of scroll (body.ac-scrolled, toggled in main.js) it
   switches to solid cream with navy nav/logo. Same on every template. */
.topbar{ position:fixed; top:0; left:0; width:100%; z-index:21; }
header.main{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 32px;flex-wrap:wrap;gap:16px;
  position:fixed; left:0; top:27px; width:100%; z-index:20;
  background:var(--navy); border-bottom:1px solid var(--navy);
  transition:background-color .2s ease, border-color .2s ease;
}
nav{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;letter-spacing:0.03em;font-family:var(--mono);}
nav a{padding:10px 18px;border-radius:2px;color:#fff;white-space:nowrap;transition:background-color .15s ease, color .15s ease;}
nav a.active{background:var(--orange);color:#fff;}
nav a:not(.active):hover{background:rgba(255,255,255,0.15);}
header.main .brand .logo-on-navy{ display:block; }
header.main .brand .logo-on-light{ display:none; }

body.ac-scrolled header.main{
  background:var(--cream);
  border-bottom-color:var(--line);
}
body.ac-scrolled header.main .brand .logo-on-navy{ display:none; }
body.ac-scrolled header.main .brand .logo-on-light{ display:block; }
body.ac-scrolled header.main nav a:not(.active){ color:var(--navy); }
body.ac-scrolled header.main nav a:not(.active):hover{ background:#F1EEE7; }

/* ---- Hero (home only — photo backdrop; the fixed topbar + header sit
   on top of it as a solid navy bar) ---- */
.hero{
  position:relative;
  min-height:620px;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:#111 url('assets/hero-bg.jpg') center/cover no-repeat;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(8,10,14,0.15) 0%, rgba(8,10,14,0.75) 100%);
}

.hero-tag{
  position:relative;z-index:1;
  padding:0 32px 64px;
  max-width:820px;
}
.hero-tag p{
  color:#fff;font-size:19px;line-height:1.55;font-family:var(--sans);
  animation:rise 0.7s ease-out;
}
@keyframes rise{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}
@media (prefers-reduced-motion: reduce){
  .hero-tag p{animation:none;}
}

/* ---- Page head (client portal h1) ----
   padding-top is set to exactly the fixed topbar+header stack's own
   rendered height (measured via Playwright: 27px topbar + 73px header =
   100px) — a single value, not that height added on top of the old
   pre-fixed-header 56px. The old 56px was baked into the flow gap back
   when the header was position:sticky and consumed its own space above
   main; now that it's position:fixed and reserves none, this padding is
   the only thing standing between main's content and the header — adding
   both stacked the two and left a much bigger gap than intended. */
main{max-width:1180px;margin:0 auto;padding:100px 32px 0;}
.page-head h1{
  font-family:var(--script);font-weight:normal;
  font-size:38px;color:var(--navy);margin-bottom:10px;text-transform:uppercase;
}
.page-head p{font-size:14px;color:#555;line-height:1.6;max-width:680px;margin-bottom:44px;}

/* ---- Gate notice (client portal) ---- */
.gate{
  border:1px solid #F0DAB8;background:#FBF3E9;padding:18px 22px;
  font-size:13px;color:#6B4A1E;margin-bottom:40px;line-height:1.6;
}
.gate strong{color:var(--navy);}

/* ---- Two-panel home cards ---- */
.panels{
  display:grid;grid-template-columns:1fr 1fr;gap:32px;
}
@media (max-width:820px){ .panels{grid-template-columns:1fr;} }

.panel{
  border:1px solid var(--line);padding:36px 32px;background:#fff;
}
.panel .eyebrow{
  color:var(--orange-dark);font-size:12px;letter-spacing:0.06em;font-weight:bold;
  font-family:var(--mono);
}
.panel h2{
  font-family:var(--script);
  font-size:34px;color:var(--navy);margin:10px 0 18px;font-weight:normal;
  text-transform:uppercase;letter-spacing:0.01em;
}
.panel p.desc{font-size:14px;line-height:1.6;color:#444;margin-bottom:6px;font-family:var(--sans);}

.step{
  display:flex;align-items:center;gap:16px;
  padding:16px 0;border-top:1px solid var(--line);font-size:15px;font-family:var(--sans);
}
.step .num{
  width:34px;height:34px;border-radius:50%;
  background:#FBE3CC;color:var(--orange-dark);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;flex-shrink:0;font-family:var(--mono);
}

.cta{
  display:inline-block;margin-top:24px;padding:14px 22px;
  background:var(--orange);color:#fff;font-size:13px;letter-spacing:0.03em;
  border:none;cursor:pointer;font-family:var(--mono);
}
.cta:hover{background:var(--orange-dark);}

/* ---- Content blocks (client portal sections) ---- */
section.block{
  border:1px solid var(--line);background:#fff;padding:32px;margin-bottom:32px;
}
section.block h2{
  font-family:var(--script);font-weight:normal;font-size:26px;color:var(--navy);margin-bottom:6px;text-transform:uppercase;
}
section.block .sub{font-size:13px;color:#666;margin-bottom:24px;}

/* ---- Talent Sign-Up section (home) ---- */
#talent-signup{
  margin-top:56px;border:1px solid var(--line);background:#fff;padding:40px 32px;
}
#talent-signup h3{
  font-family:var(--script);font-size:28px;color:var(--navy);font-weight:normal;margin-bottom:6px;
  text-transform:uppercase;
}
#talent-signup .sub{font-size:13px;color:#666;margin-bottom:28px;font-family:var(--sans);}

/* ---- Shared form styling ---- */
fieldset{border:1px solid var(--line);padding:20px;margin-bottom:20px;}
legend{font-size:12px;letter-spacing:0.05em;color:var(--navy);padding:0 8px;font-weight:bold;font-family:var(--mono);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:14px;}
@media (max-width:640px){ .field-row{grid-template-columns:1fr;} }
label{display:block;font-size:12px;color:#555;margin-bottom:4px;font-family:var(--sans);}
input, select, textarea{
  width:100%;padding:10px;border:1px solid var(--line);font-family:var(--sans);font-size:13px;background:#FCFCFA;
}
textarea{resize:vertical;min-height:80px;}
.consent-row{
  display:flex;align-items:flex-start;gap:10px;background:#FBF3E9;border:1px solid #F0DAB8;padding:14px;margin-top:8px;
}
.consent-row input{width:auto;margin-top:3px;}
.consent-row p{font-size:12px;line-height:1.5;color:#555;font-family:var(--sans);}

/* ---- Inline submit feedback banners ---- */
.ac-banner{
  padding:16px 20px;margin-bottom:24px;font-size:13px;line-height:1.6;border:1px solid;
}
.ac-banner-success{background:#EAF6EC;border-color:#BFE3C4;color:#245A2E;}
.ac-banner-error{background:#FBEAEA;border-color:#EFC4C4;color:#7A2323;}

/* ---- Placeholder embeds (client portal) ---- */
.embed-placeholder{
  border:2px dashed var(--line);background:#FAF9F6;
  padding:40px;text-align:center;color:#888;font-size:13px;line-height:1.7;
}
.embed-placeholder code{
  display:block;margin-top:10px;background:#F1EEE7;color:#555;
  padding:10px;font-size:11px;text-align:left;overflow-x:auto;
}
.status-tag{
  display:inline-block;font-size:11px;letter-spacing:0.04em;padding:3px 8px;
  background:#E8ECF3;color:var(--navy);margin-bottom:12px;font-family:var(--mono);
}

/* ---- WordPress native password-form fallback (client portal gate) ---- */
.post-password-form{max-width:420px;margin:0 auto 40px;padding:32px;border:1px solid var(--line);background:#fff;}
.post-password-form p{margin-bottom:14px;font-size:13px;color:#555;}
.post-password-form label{display:block;}
.post-password-form input[type="submit"]{
  width:auto;margin-top:10px;padding:12px 20px;background:var(--orange);color:#fff;
  border:none;cursor:pointer;font-family:var(--mono);font-size:13px;
}
.post-password-form input[type="submit"]:hover{background:var(--orange-dark);}

/* ---- Footer, shared ---- */
footer{margin-top:56px;background:var(--navy);color:#fff;text-align:center;padding:32px 32px 24px;}
footer .brand{justify-content:center;margin:0 auto 12px;}
footer .brand .logo{height:44px;}
footer .brand .logo-on-light{display:none;}
footer .contact{font-size:13px;color:#D9DEE6;font-family:var(--mono);}

/* ---- Subfooter: white bg / navy text, separate strip below the navy footer ---- */
.footer-bottom{
  background:#fff;color:var(--navy);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;
  padding:16px 32px;margin:32px -32px -32px;font-size:11px;font-family:var(--mono);
}
.footer-bottom a{margin-left:16px;color:var(--navy);}
.footer-bottom a:hover{color:var(--orange-dark);text-decoration:underline;}

/* ---- Small-screen nav: keep each link on one line, shrink to fit
   instead of wrapping a link's own text mid-word ---- */
@media (max-width:480px){
  .topbar{padding:6px 20px;font-size:10px;}
  header.main{padding:12px 20px;gap:10px;}
  .brand .logo{height:30px;}
  nav{gap:6px;}
  nav a{padding:8px 12px;font-size:12px;}
  header.main{ top:24px; }
  main{ padding-top:119px; }
}