/*
Theme Name: Worldbeat Collective
Theme URI: https://worldbeatcollective.tc
Author: Worldbeat Collective
Description: Custom theme for Worldbeat Collective, a premium entertainment booking house for Turks and Caicos. Roster (Talent) is a custom post type editable natively in wp-admin. No page builder required.
Version: 1.0
Text Domain: worldbeat
*/

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&display=swap');

/* ================= THEME VARIABLES ================= */
:root{
  --bg:#FFFFFF;
  --bg-soft:#F1F1EF;
  --bg-card:#F6F6F4;
  --fg:#0A0A0A;
  --fg-dim:#5C5C5C;
  --fg-dimmer:#8C8C8C;
  --line:#DEDEDE;
  --btn-bg:#0A0A0A;
  --btn-fg:#FFFFFF;
  color-scheme: light;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}
body{margin:0; background:var(--bg); color:var(--fg); font-family:'Inter', sans-serif; font-size:16px; line-height:1.55; transition:background 0.2s ease, color 0.2s ease;}
.wrap{max-width:480px; margin:0 auto; padding-bottom:40px;}
@media (min-width:860px){ .wrap{max-width:900px;} }
a{color:var(--fg); text-decoration:none; cursor:pointer;}
.display{font-family:'Anton', sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:0.02em; line-height:0.98;}
img{max-width:100%; display:block;}

/* ---------- NAV ---------- */
nav.wbc-nav{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:20;}
.logo{font-family:'Anton', sans-serif; font-size:16px; letter-spacing:0.08em; text-transform:uppercase;}
.nav-right{display:flex; align-items:center; gap:8px;}
.icon-btn{background:none; border:1px solid var(--line); color:var(--fg); cursor:pointer; padding:9px 11px; display:flex; align-items:center; justify-content:center;}
.icon-btn:hover{border-color:var(--fg);}
.icon-btn svg{display:block;}
.book-btn{background:var(--btn-bg); color:var(--btn-fg); border:none; font-family:'Inter', sans-serif; font-weight:700; font-size:11.5px; letter-spacing:0.08em; padding:11px 14px; cursor:pointer; text-transform:uppercase;}
.book-btn:hover{opacity:0.85;}

.nav-overlay{display:none; position:fixed; inset:0; background:var(--bg); z-index:50; flex-direction:column; padding:20px;}
.nav-overlay.open{display:flex;}
.nav-overlay-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:56px;}
.nav-overlay ul{list-style:none; margin:0; padding:0;}
.nav-overlay a{display:block; font-family:'Anton', sans-serif; font-size:30px; letter-spacing:0.02em; text-transform:uppercase; padding:14px 0; border-bottom:1px solid var(--line);}
.nav-overlay a:hover{color:var(--fg-dim);}

/* ---------- HERO ---------- */
.hero{position:relative; min-height:70vh; display:flex; align-items:flex-end; overflow:hidden; background-size:cover; background-position:center;}
.hero.no-image{
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.10), transparent 45%),
    radial-gradient(circle at 80% 10%, rgba(255,255,255,0.07), transparent 40%),
    radial-gradient(circle at 55% 60%, rgba(255,255,255,0.05), transparent 55%),
    linear-gradient(180deg, #050505 0%, #131313 55%, #050505 100%);
}
.hero.no-image::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    radial-gradient(2px 2px at 15% 30%, rgba(255,255,255,0.5), transparent),
    radial-gradient(2px 2px at 35% 65%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1.5px 1.5px at 60% 25%, rgba(255,255,255,0.4), transparent),
    radial-gradient(2px 2px at 75% 55%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1.5px 1.5px at 85% 75%, rgba(255,255,255,0.4), transparent);
  opacity:0.8;
}
.hero.has-image::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.75) 100%);
}
.hero-content{position:relative; z-index:2; padding:0 20px 44px; width:100%; max-width:900px; margin:0 auto;}
.hero-note{font-size:10.5px; color:#9C9C97 !important; letter-spacing:0.08em; margin-bottom:10px; text-transform:uppercase;}
.hero h1.display{font-size:44px; color:#fff !important; margin:0 0 14px;}
.hero p.lede{color:#D6D6D6 !important; font-size:15px; max-width:34ch; margin:0 0 22px;}
.hero .btn{background:#F5F5F5 !important; color:#0A0A0A !important;}
.hero .btn-outline{background:transparent !important; color:#F5F5F5 !important; border:1px solid #3A3A38 !important;}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; padding:15px 26px; background:var(--btn-bg); color:var(--btn-fg); font-weight:700; font-size:13px; letter-spacing:0.06em; text-transform:uppercase; border:none; cursor:pointer;}
.btn:hover{opacity:0.85;}
.btn-outline{background:transparent; color:var(--fg); border:1px solid var(--line);}
.btn-outline:hover{border-color:var(--fg);}
.btn-row{display:flex; gap:10px; flex-wrap:wrap;}

/* ---------- SECTIONS ---------- */
.section{padding:44px 20px;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px; gap:12px;}
.eyebrow{font-size:11px; font-weight:700; letter-spacing:0.14em; color:var(--fg-dim); margin:0; text-transform:uppercase;}
.see-all{font-size:11.5px; font-weight:700; letter-spacing:0.06em; color:var(--fg-dim); text-transform:uppercase; border-bottom:1px solid var(--line); white-space:nowrap;}
h2.display{font-size:26px; margin:14px 0 8px;}
.section p.lede{color:var(--fg-dim); font-size:14.5px; max-width:38ch; margin:0 0 24px;}
.section .entry-content{color:var(--fg-dim); font-size:14.5px; max-width:60ch; margin:0 0 24px;}
hr.rule{border:none; border-top:1px solid var(--line); margin:0;}

/* ---------- TALENT GRID ---------- */
.talent-scroll{display:flex; gap:14px; overflow-x:auto; margin:0 -20px; padding:0 20px 6px;}
.talent-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (min-width:860px){ .talent-grid{grid-template-columns:1fr 1fr 1fr;} }
.talent-card{flex:0 0 150px; cursor:pointer;}
.talent-grid .talent-card{flex:none; width:auto;}
.portrait{width:100%; aspect-ratio:3/4; background:linear-gradient(145deg, #232323, #0E0E0E); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; margin-bottom:10px; position:relative; overflow:hidden;}
.portrait img{width:100%; height:100%; object-fit:cover;}
.portrait .initials{font-family:'Anton', sans-serif; font-size:38px; color:#6B6B68; letter-spacing:0.02em;}
.talent-card h3{font-family:'Anton', sans-serif; font-size:15px; text-transform:uppercase; letter-spacing:0.01em; margin:0 0 3px; font-weight:400;}
.talent-card .cat{font-size:11px; color:var(--fg-dim); text-transform:uppercase; letter-spacing:0.05em;}

/* ---------- ANNOUNCEMENTS ---------- */
.announce-card{margin-bottom:16px;}
.announce-photo{width:100%; aspect-ratio:16/9; background:linear-gradient(120deg, #1B1B1B, #0A0A0A 60%, #1B1B1B); border:1px solid var(--line); position:relative; margin-bottom:10px; display:flex; align-items:flex-end; padding:14px; overflow:hidden;}
.announce-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.announce-photo span{position:relative; z-index:1; font-size:11px; color:#9C9C97; letter-spacing:0.06em; text-transform:uppercase;}
.announce-card h4{margin:0 0 3px; font-size:15.5px; font-weight:700;}
.announce-card p{margin:0; font-size:13px; color:var(--fg-dim);}

/* ---------- TAGS ---------- */
.tag-row{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px;}
.tag{border:1px solid var(--line); color:var(--fg-dim); font-size:12px; padding:7px 12px; letter-spacing:0.03em;}

/* ---------- TALENT PROFILE ---------- */
.profile-cat{font-size:12px; color:var(--fg-dim); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:8px;}
.profile-desc{color:var(--fg); opacity:0.85; font-size:15px; max-width:44ch; margin:0 0 22px;}
.tag-label{font-size:11px; color:var(--fg-dimmer); letter-spacing:0.1em; text-transform:uppercase; margin:0 0 10px;}
.back-link{display:inline-block; font-size:12px; color:var(--fg-dim); letter-spacing:0.05em; text-transform:uppercase; margin-bottom:20px; border-bottom:1px solid var(--line);}
.back-link:hover{color:var(--fg);}
.contact-row{border-bottom:1px solid var(--line); padding-bottom:18px; margin-bottom:18px;}
.contact-dim{color:var(--fg-dim); font-size:14.5px;}
.index-article{margin-bottom:32px; border-bottom:1px solid var(--line); padding-bottom:24px;}

/* ---------- BOOK FORM ---------- */
.toggle-row{display:flex; border:1px solid var(--line); margin-bottom:24px;}
.toggle-btn{flex:1; background:none; border:none; color:var(--fg-dim); padding:13px; font-family:'Inter', sans-serif; font-size:12.5px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; cursor:pointer;}
.toggle-btn.active{background:var(--btn-bg); color:var(--btn-fg);}
.vibe-chip-row{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:22px;}
.vibe-chip{border:1px solid var(--line); color:var(--fg); font-size:13px; padding:10px 15px; cursor:pointer; text-transform:uppercase; letter-spacing:0.02em; background:none;}
.vibe-chip.selected{background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-bg);}

.field{margin-bottom:16px;}
.field label{display:block; font-size:11.5px; font-weight:700; letter-spacing:0.05em; margin-bottom:7px; color:var(--fg-dim); text-transform:uppercase;}
.field input, .field select, .field textarea{
  width:100%; min-height:48px; padding:13px 14px;
  background:var(--bg-soft); border:1px solid var(--line); color:var(--fg);
  font-family:'Inter', sans-serif; font-size:14.5px;
  -webkit-appearance:none; appearance:none; border-radius:0;
}
.field textarea{min-height:auto;}
.field select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='M5 7l5 5 5-5' stroke='%238C8C8C' stroke-width='1.5'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:36px;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--fg);}
.field input::placeholder, .field textarea::placeholder{color:var(--fg-dimmer);}
.field-row{display:flex; gap:10px;}
.field-row .field{flex:1; min-width:0;}

.chip{display:inline-flex; align-items:center; gap:10px; border:1px solid var(--fg); padding:9px 14px; font-size:13.5px; margin-bottom:20px;}
.chip .clear{cursor:pointer; color:var(--fg-dim); font-size:16px; line-height:1;}

.confirm-panel{border:1px solid var(--fg); padding:24px; text-align:left;}
.confirm-panel h3{font-family:'Anton', sans-serif; font-weight:400; font-size:20px; margin:0 0 10px; text-transform:uppercase;}
.confirm-panel p{color:var(--fg-dim); font-size:14px; margin:0;}

/* ---------- FOOTER ---------- */
footer.wbc-footer{padding:32px 20px 40px; border-top:1px solid var(--line); font-size:12.5px; color:var(--fg-dim);}
footer .foot-logo{font-family:'Anton', sans-serif; font-size:15px; color:var(--fg); margin-bottom:14px; text-transform:uppercase; letter-spacing:0.04em;}
footer .foot-links{display:flex; gap:18px; margin:16px 0; flex-wrap:wrap; list-style:none; padding:0;}
footer .foot-links a{font-size:12px; color:var(--fg-dim); text-transform:uppercase; letter-spacing:0.04em;}
footer .foot-links a:hover{color:var(--fg);}
footer .fine{color:var(--fg-dimmer); margin-top:16px;}