/*
Theme Name: Duke Bliss Moon
Description: Custom dark space theme replicating dukeblissmoon.com - moon/starfield aesthetic, white pill menu, serif post titles.
Version: 1.0
Author: Duke Bliss Moon
*/

:root { --red:#d21f1f; --blue:#2b5fd9; --serif:'Playfair Display',Georgia,serif; --sans:'Josefin Sans',Arial,Helvetica,sans-serif; }
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body { background:#000 url(https://www.mybrokeheart.com/wp-content/uploads/2026/11/starfield.jpg) center top / cover fixed no-repeat; color:#fff; font-family:var(--sans); font-size:16px; line-height:1.6; }
a { color:var(--blue); }
img { max-width:100%; height:auto; }
video { max-width:100%; }

/* Header */
.site-header { text-align:center; padding:52px 16px 0; }
.site-title a { font-family:var(--sans); font-weight:300; font-size:34px; letter-spacing:.55em; margin-right:-.55em; color:#fff; text-decoration:none; }
.site-tagline { font-size:14px; font-weight:400; letter-spacing:.42em; margin:12px 0 0; color:#fff; }
.main-menu { display:flex; justify-content:center; max-width:900px; margin:36px auto 0; }
.main-menu a { flex:1 1 0; background:#fff; color:#000; text-decoration:none; font-size:13px; font-weight:600; letter-spacing:.14em; padding:11px 4px; border-right:1px solid #bbb; text-align:center; }
.main-menu a:last-child { border-right:0; }
.main-menu a.active { background:#000; color:#fff; box-shadow:inset 0 0 0 1px #fff; }

/* Buttons */
.pill { display:inline-block; background:#fff; color:var(--blue); border:2px solid var(--red); border-radius:40px; padding:12px 40px; font-size:15px; font-weight:600; letter-spacing:.04em; text-decoration:none; }
.pill:hover { background:#f2f2f2; }

/* Home */
.hero { position:relative; max-width:1000px; margin:44px auto 0; }
.hero-video { display:block; width:100%; }
.hero .moon { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:36%; }
.hero .duke-logo { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:20%; }
.intro { max-width:620px; margin:70px auto 0; text-align:center; font-size:17px; font-weight:600; line-height:1.7; padding:0 16px; }
.duke-sec { text-align:center; margin:34px 0 0; }
.duke-sec h2 { font-size:26px; font-weight:400; letter-spacing:.12em; margin:0 0 24px; }
.duke-photo { display:block; max-width:980px; width:calc(100% - 32px); margin:70px auto 0; }
.cards { display:flex; flex-wrap:wrap; gap:40px; justify-content:center; max-width:1120px; margin:70px auto 0; padding:0 16px; }
.card { width:330px; text-align:center; }
.card img { width:330px; height:470px; object-fit:cover; display:block; }
.card .pill { margin:-22px auto 0; position:relative; z-index:2; font-size:14px; padding:10px 26px; }
.sun-decor { display:block; width:280px; margin:10px auto -60px; position:relative; z-index:2; }
.teasers { display:grid; grid-template-columns:1fr 1fr; gap:36px; max-width:1010px; margin:100px auto 0; padding:0 16px; }
.teaser { color:#fff; text-decoration:none; display:block; }
.teaser .meta { font-size:13px; opacity:.85; margin-bottom:14px; }
.teaser h3 { font-family:var(--serif); font-size:30px; font-weight:400; line-height:1.25; margin:0 0 14px; color:#fff; }
.teaser.solid { background:#2e2038; padding:34px; }
.teaser.solid h3 { border-bottom:1px solid rgba(255,255,255,.35); padding-bottom:16px; }
.teaser img, .teaser video { display:block; width:100%; height:340px; object-fit:cover; }
.teaser.wide { grid-column:1; }
.explore-wrap { text-align:center; margin:70px 0 0; }

/* Signup strip + footer */
.signup-strip { position:relative; text-align:center; margin:110px 0 60px; padding:40px 16px 120px; min-height:260px; }
.signup-strip .earth { position:absolute; left:40px; bottom:-40px; width:360px; border-radius:50%; pointer-events:none; }
.signup-text { font-weight:600; font-size:17px; margin:0 0 22px; }
.signup-btn { display:block; max-width:560px; margin:0 auto; padding:13px; border:1px solid var(--red); color:#fff; text-decoration:none; font-size:15px; background:rgba(0,0,0,.35); }
.signup-btn:hover { background:rgba(210,31,31,.18); }
.signup-strip .yt img { width:52px; margin-top:34px; }
.site-footer { text-align:center; padding:10px 16px 40px; }
.footer-nav a { color:#fff; text-decoration:none; font-size:13px; letter-spacing:.12em; margin:0 18px; }
.footer-nav a:hover { text-decoration:underline; }
.credits { color:#8a8a8a; font-size:12px; margin-top:18px; }

/* Inner pages */
.page-wrap { max-width:1000px; margin:0 auto; padding:0 16px; }
h1.page-title { text-align:center; font-size:34px; font-weight:600; letter-spacing:.06em; margin:60px 0 30px; }

/* Updates */
.cat-filter { text-align:center; margin:0 0 40px; }
.cat-filter a { color:#fff; text-decoration:none; margin:0 14px; font-size:14px; letter-spacing:.08em; opacity:.75; }
.cat-filter a.active, .cat-filter a:hover { opacity:1; text-decoration:underline; }
.post-card { display:block; border:1px solid rgba(255,255,255,.45); padding:44px 40px; margin:0 auto 40px; max-width:760px; text-align:center; color:#fff; text-decoration:none; background:rgba(0,0,0,.35); }
.post-card:hover { border-color:#fff; }
.post-card .pc-author { font-size:14px; margin-bottom:2px; }
.post-card .pc-meta { font-size:13px; opacity:.7; margin-bottom:18px; }
.post-card .pc-cat { font-size:13px; letter-spacing:.06em; margin-bottom:20px; }
.post-card h2 { font-family:var(--serif); font-size:34px; font-weight:400; margin:0 0 18px; line-height:1.25; }
.post-card p { font-size:14px; opacity:.9; margin:0; }

/* Single post */
.single-wrap { max-width:760px; margin:0 auto; padding:0 16px 40px; }
.single-wrap .pc-cat { text-align:center; font-size:14px; margin-top:50px; }
.single-wrap h1 { font-family:var(--serif); font-size:40px; font-weight:400; text-align:center; line-height:1.25; margin:10px 0 8px; }
.single-wrap .pc-meta { text-align:center; font-size:13px; opacity:.7; margin-bottom:34px; }
.single-wrap .content p, .single-wrap .content li { font-size:16px; }
.single-wrap .content video { display:block; margin:0 auto 1.5rem; }
.single-wrap .feat { display:block; margin:0 auto 30px; }
.back-link { display:block; text-align:center; margin:40px 0; }

/* About */
.about-hero { position:relative; overflow:hidden; margin-top:50px; }
.about-hero video.bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.about-hero .shade { position:absolute; inset:0; background:rgba(0,0,0,.25); z-index:1; }
.about-hero .inner { position:relative; z-index:2; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:40px; padding:70px 24px; }
.about-hero .logo { width:220px; }
.about-panel { background:rgba(0,0,0,.45); padding:44px 48px; max-width:600px; text-align:center; }
.about-panel .small { font-size:13px; letter-spacing:.14em; margin:0 0 6px; }
.about-panel h1 { font-size:38px; font-weight:400; margin:0 0 18px; }
.about-panel .rule { width:70%; height:2px; background:var(--red); margin:0 auto 26px; }
.about-panel p { font-size:15px; line-height:1.7; }
.about-panel ul { text-align:left; display:inline-block; margin:0 auto; padding-left:22px; font-size:15px; }
.about-panel ul li { margin:3px 0; }
.thanks { text-align:center; font-size:28px; margin:70px 0 90px; font-weight:400; }

/* Contact */
.contact-hero { position:relative; overflow:hidden; text-align:center; padding:90px 16px 70px; margin-top:50px; }
.contact-hero video.bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.contact-hero .inner { position:relative; z-index:2; }
.contact-hero img.cl { width:150px; margin-bottom:20px; }
.contact-hero h1 { font-size:44px; font-weight:700; letter-spacing:.04em; margin:0; text-shadow:0 2px 18px rgba(0,0,0,.7); }
.contact-form { max-width:560px; margin:60px auto 90px; padding:0 16px; }
.contact-form label { display:block; font-size:14px; margin:18px 0 6px; }
.contact-form input, .contact-form textarea { width:100%; padding:12px 14px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.4); color:#fff; font-family:var(--sans); font-size:15px; }
.contact-form textarea { min-height:140px; resize:vertical; }
.contact-form .row { display:flex; gap:16px; }
.contact-form .row > div { flex:1; }
.contact-form button { margin-top:26px; cursor:pointer; }
.form-note { text-align:center; margin-top:16px; font-size:14px; }
.form-note.ok { color:#7be07b; }
.form-note.err { color:#ff8a8a; }

/* Quiz */
.quiz-hero { position:relative; text-align:center; padding:110px 16px 90px; margin-top:50px; background:url(https://www.mybrokeheart.com/wp-content/uploads/2026/11/quiz-bg.jpg) center 30% / cover no-repeat; }
.quiz-hero .shade { position:absolute; inset:0; background:rgba(0,0,0,.35); }
.quiz-hero .inner { position:relative; z-index:2; }
.quiz-hero img.qlogo { width:280px; }
.quiz-hero h1 { font-size:46px; font-weight:700; letter-spacing:.05em; margin:10px 0 0; text-shadow:0 2px 20px rgba(0,0,0,.8); }
.quiz-lead { max-width:520px; margin:60px auto 0; text-align:center; }
.quiz-lead p { font-size:17px; font-weight:600; margin:0 0 6px; }
.quiz-lead .dim { font-weight:400; opacity:.85; }
#quiz-app { max-width:640px; margin:50px auto 90px; padding:0 16px; }
#quiz-app .qbox { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.35); padding:36px 34px; }
#quiz-app h2 { font-size:22px; margin:0 0 22px; font-weight:600; }
#quiz-app .opt { display:block; width:100%; text-align:left; margin:10px 0; padding:14px 18px; background:rgba(255,255,255,.05); color:#fff; border:1px solid rgba(255,255,255,.3); font-family:var(--sans); font-size:15px; cursor:pointer; }
#quiz-app .opt:hover { border-color:#fff; background:rgba(255,255,255,.12); }
#quiz-app .progress { font-size:13px; opacity:.7; margin-bottom:18px; }
#quiz-app .result h2 { font-family:var(--serif); font-size:30px; font-weight:400; }
#quiz-app .start-btn { margin:0 auto; display:block; }

@media (max-width:800px) {
  .site-title a { font-size:22px; }
  .main-menu { flex-wrap:wrap; }
  .main-menu a { flex:1 1 45%; border:1px solid #bbb; }
  .teasers { grid-template-columns:1fr; }
  .signup-strip .earth { position:static; display:block; margin:0 auto 20px; width:220px; }
  .signup-strip { padding-bottom:40px; }
  .about-hero .inner { padding:40px 16px; }
}