/*
Theme Name: Machine & Mentor
Theme URI: https://example.com
Author: Robbie
Description: A warm one-pager theme for an AI learning brand — hero, module/video cards with status tags, podcast/banner section and footer, all editable from the Customizer. Modules are a custom post type so each one links out to its own page for video + notes.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: machine-mentor
*/

:root{
  --cream:#f3e8d6;
  --cream-2:#efe1cb;
  --teal:#1e3a37;
  --teal-2:#254642;
  --orange:#dda23f;
  --orange-dark:#c98f2c;
  --ink:#22322f;
  --muted:#6f6a5e;
  --line: rgba(30,58,55,0.18);
  --white:#fffaf0;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  font-family:'DM Sans', sans-serif;
  color:var(--ink);
}
img{max-width:100%;height:auto;}
a{color:inherit;}
.wrap{
  max-width:1080px;
  margin:0 auto;
  padding:28px 32px 0;
}
.mono{font-family:'Space Mono', monospace;}

/* top bar */
.topbar{display:flex; justify-content:flex-start; align-items:center; margin-bottom:36px; flex-wrap:wrap; gap:12px;}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Space Mono', monospace; font-size:11px; letter-spacing:.06em;
  background:var(--teal); color:var(--white);
  padding:6px 12px; border-radius:6px;
}
.live-dot{position:relative; width:8px; height:8px; border-radius:50%; background:#ff4d4d; flex-shrink:0;}
.live-dot::before{
  content:''; position:absolute; inset:-5px; border-radius:50%;
  background:#ff4d4d; opacity:.55;
  animation:mm-pulse 1.6s ease-out infinite;
}
@keyframes mm-pulse{
  0%{transform:scale(.5); opacity:.6;}
  70%{transform:scale(2.1); opacity:0;}
  100%{opacity:0;}
}
/* hero */
.hero{
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px;
  align-items:start; margin-bottom:56px;
}
.eyebrow{
  font-family:'Space Mono', monospace; font-size:11px; letter-spacing:.08em;
  color:var(--muted); margin-bottom:14px;
}
h1.title{
  font-family:'Space Mono', monospace; font-weight:700;
  font-size:44px; line-height:1.05; margin:0 0 18px; color:var(--teal);
}
h1.title .amp{color:var(--orange);}
.subtitle{
  font-size:16px; line-height:1.55; color:var(--ink); max-width:480px; margin:0 0 24px;
}
form.signup{display:flex; gap:10px; max-width:420px; flex-wrap:wrap;}
form.signup input{
  flex:1; min-width:180px; border:1px solid var(--line); border-radius:8px;
  padding:12px 14px; font-family:'DM Sans',sans-serif; font-size:14px;
  background:var(--white); color:var(--ink); outline:none;
}
form.signup input::placeholder{color:#a19d8e;}
form.signup button{
  border:none; border-radius:8px; padding:12px 20px;
  background:var(--orange); color:var(--teal); font-weight:700; font-size:14px;
  cursor:pointer; white-space:nowrap;
  font-family:'DM Sans',sans-serif;
}
form.signup button:hover{background:var(--orange-dark);}
.fineprint{font-size:12px; color:var(--muted); margin-top:10px;}

/* robot card */
.robot-card{
  background:var(--teal); border-radius:18px; padding:28px;
  display:flex; flex-direction:column; align-items:center; gap:18px;
  min-height:260px; justify-content:center;
}
.logo-slot{
  width:150px; height:150px; display:flex; align-items:center; justify-content:center;
}
.mentor-ready{
  display:flex; align-items:center; gap:8px;
  font-family:'Space Mono', monospace; font-size:11px; letter-spacing:.08em;
  color:var(--white);
}
.mentor-ready .sq{width:8px;height:8px;background:var(--orange);}

/* modules intro */
.modules-intro{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:24px; margin-bottom:18px; flex-wrap:wrap;
}
.modules-badge{
  font-family:'Space Mono', monospace; font-size:11px; letter-spacing:.08em;
  background:var(--orange); color:var(--teal); padding:5px 12px; border-radius:6px;
  height:fit-content;
}
.modules-desc{
  font-size:13px; color:var(--muted); font-style:italic; max-width:340px; text-align:right;
}
h2.modules-heading{
  font-family:'Space Mono', monospace; font-weight:700; color:var(--teal);
  font-size:32px; line-height:1.15; margin:0 0 32px; max-width:640px;
}

/* module cards */
.modules-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:56px;
}
a.module-card{
  background:var(--white); border:1px solid var(--line); border-radius:14px;
  padding:20px; display:flex; flex-direction:column; gap:12px;
  text-decoration:none; color:inherit; cursor:pointer;
  transition:transform .15s ease, border-color .15s ease;
}
a.module-card:hover{transform:translateY(-3px); border-color:var(--teal);}
a.module-card.featured{background:var(--teal); border-color:var(--teal); color:var(--white);}
a.module-card.featured:hover{border-color:var(--orange);}
.module-top{display:flex; justify-content:space-between; align-items:center;}
.module-num{
  font-family:'Space Mono', monospace; font-weight:700; font-size:13px;
  width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.module-num.orange{background:var(--orange); color:var(--teal);}
.module-num.dark{background:var(--ink); color:var(--white);}
.tag{
  font-family:'Space Mono', monospace; font-size:10px; letter-spacing:.06em;
  padding:4px 9px; border-radius:5px;
}
.tag-orange{background:var(--orange); color:var(--teal);}
.tag-outline{border:1px solid var(--line); color:var(--muted);}
.tag-orange-o{border:1px solid var(--orange); color:var(--orange);}
a.module-card h3{margin:0; font-size:17px; font-weight:700; font-family:'DM Sans',sans-serif;}
a.module-card p{margin:0; font-size:13.5px; line-height:1.5; color:var(--muted);}
a.module-card.featured p{color:#cfe3de;}

/* podcast */
.podcast-section{
  display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:36px;
}
.podcast-left{
  background:var(--teal); border-radius:16px; padding:30px; color:var(--white);
  display:flex; flex-direction:column; justify-content:center;
}
.podcast-eyebrow{
  font-family:'Space Mono', monospace; font-size:11px; letter-spacing:.08em;
  color:var(--orange); margin-bottom:10px;
}
.podcast-left h3{margin:0 0 12px; font-size:22px; font-family:'DM Sans',sans-serif;}
.podcast-left p{margin:0 0 20px; font-size:13.5px; line-height:1.6; color:#cfe3de;}
.podcast-buttons{display:flex; gap:10px; flex-wrap:wrap;}
.btn-orange{
  background:var(--orange); color:var(--teal); border:none; border-radius:8px;
  padding:10px 16px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.05em;
  cursor:pointer; text-decoration:none; display:inline-block;
}
.btn-orange:hover{background:var(--orange-dark);}
.btn-outline{
  background:transparent; color:var(--white); border:1px solid rgba(255,255,255,0.4);
  border-radius:8px; padding:10px 16px; font-family:'Space Mono',monospace; font-size:11px;
  letter-spacing:.05em; cursor:pointer; text-decoration:none; display:inline-block;
}
.btn-outline:hover{border-color:#fff;}
.podcast-right{
  border:2px dashed var(--line); border-radius:16px; background:var(--white);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:30px; text-align:center; position:relative;
}
.bars{display:flex; gap:6px; margin-bottom:16px;}
.bars span{width:5px; height:26px; background:var(--line); border-radius:3px; display:block;}
.bars span:nth-child(2){height:36px;}
.bars span:nth-child(3){height:18px;}
.bars span:nth-child(4){height:30px;}
.embed-label{
  font-family:'Space Mono', monospace; font-size:13px; letter-spacing:.06em;
  color:var(--teal); margin-bottom:8px;
}
.embed-caption{font-size:12.5px; color:var(--muted); max-width:280px; margin:0 auto;}
.banner-image{width:100%; max-width:360px; margin:0 auto 12px;}
.banner-image img{width:100%; height:180px; object-fit:cover; border-radius:12px; display:block;}
.banner-embed{width:100%;}
.banner-embed iframe{width:100%; border:none; border-radius:12px; min-height:220px;}

/* footer */
footer{
  border-top:1px solid var(--line); margin-top:20px; padding:20px 0 28px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
}
.footer-left{font-size:12.5px; color:var(--muted);}
.footer-social{display:flex; gap:16px; font-size:12.5px; color:var(--muted); flex-wrap:wrap;}
.footer-social a{text-decoration:none; color:var(--muted);}
.footer-social a:hover{color:var(--teal);}

/* single module / generic page */
.module-single, .generic-page{max-width:760px; margin:0 auto; padding:20px 0 60px;}
.module-single-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; flex-wrap:wrap; gap:10px;}
.back-link{color:var(--teal); text-decoration:none; font-size:12px; letter-spacing:.05em; font-family:'Space Mono',monospace;}
.back-link:hover{color:var(--orange-dark);}
.module-single-title{font-family:'Space Mono', monospace; font-weight:700; color:var(--teal); font-size:30px; margin:0 0 20px;}
.module-video{margin-bottom:24px;}
.module-video iframe{width:100%; aspect-ratio:16/9; border:none; border-radius:12px;}
.module-body{font-size:15.5px; line-height:1.75; color:var(--ink);}
.module-body p{margin:0 0 1.2em;}

@media (max-width: 860px){
  .hero{grid-template-columns:1fr;}
  .modules-grid{grid-template-columns:1fr;}
  .podcast-section{grid-template-columns:1fr;}
  h1.title{font-size:34px;}
  h2.modules-heading{font-size:26px;}
}