/*
Theme Name: Rebirth Counseling
Theme URI:  https://example.com/rebirth-counseling
Author:     Rebirth Counseling Services
Description: Clean, minimal theme tailored to Rebirth Counseling Services. Includes front-page hero, blog listing, and simple menu.
Version:    1.0
License:    GNU General Public License v2 or later
Text Domain: rebirth-counseling
Tags:       accessibility-ready, custom-logo, custom-menu, one-column, blog
*/

:root{
  --brand-brown: #4A2E27;
  --accent-teal: #2FA6A0;
  --accent-olive: #9BC26B;
  --surface: #FBF9F6;
  --text: #222222;
  --muted: #6B6B6B;
  --max-width: 1100px;
  --gap: 24px;
  --radius: 10px;
}

/* Base */
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background:#F1ECE5; /* warm off-white background */
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-teal); text-decoration:none}
.container{max-width:var(--max-width); margin:0 auto; padding:28px;}
.header-bar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; border-bottom:1px solid #efefef;}
.branding{display:flex; align-items:center; gap:12px;}
.branding img.logo{height:64px; width:auto; display:block;}
.branding .site-title{font-size:1.125rem; color:var(--brand-brown); font-weight:600; margin:0;}
.branding .site-sub{font-size:0.9rem; color:var(--muted); margin:0;}

.branding{display:flex; align-items:center; gap:16px;}
.branding img.logo{height:70px; width:auto;}
.branding img.wordmark{height:48px; width:auto;}

/* Spotlight section */
.spotlight{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:60px;
  flex-wrap:wrap;
  margin-top:0px;
  margin-bottom:60px;
  padding:20px 20px;
  text-align:center;
}
.spotlight .left, .spotlight .right{
  flex:1 1 300px;
}
.spotlight .left img{
  width:350px;
  height:auto;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,0.15));
  animation:floatUp 1.4s ease-out forwards;
}
.spotlight .right img{
  width:300px;
  height:auto;
  border-radius:16px;
  box-shadow:0 10px 20px rgba(0,0,0,0.1);
  object-fit:cover;
}
.spotlight p{
  margin-top:16px;
  color:var(--muted);
  font-size:1.1rem;
  font-weight:500;
}
@keyframes floatUp{
  0%{opacity:0; transform:translateY(40px);}
  100%{opacity:1; transform:translateY(-8px);} /* slightly more lift */
}

.spotlight .left img{
  animation:floatUp 1.4s ease-out forwards, gentleFloat 4s ease-in-out infinite alternate;
}

.spotlight .right .clinician{
  width:350px;
  height:350px;
  object-fit:cover;
  border-radius:50%;
  position:relative;
  box-shadow:0 8px 25px rgba(0,0,0,0.06), 0 0 0 4px rgba(255,255,255,0.6);
  transition:transform 0.6s ease;
  background: radial-gradient(circle at center, rgba(241,236,229,0) 70%, rgba(241,236,229,1) 100%);
  mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%);
}
.spotlight .right .clinician:hover{
  transform:scale(1.03);
}

@keyframes gentleFloat{
  from{transform:translateY(-8px);}
  to{transform:translateY(-2px);}
}



/* Nav */
.site-nav ul{list-style:none; margin:0; padding:0; display:flex; gap:20px; align-items:center;}
.site-nav a{color:var(--brand-brown); font-weight:600; padding:8px 10px; border-radius:8px;}
.site-nav a:hover{background:var(--surface)}

/* Hero */
.hero{display:grid; grid-template-columns: 1fr 360px; gap:28px; align-items:center; margin-top:28px;}
.hero .hero-copy h1{font-size:2rem; margin:0 0 12px; color:var(--brand-brown);}
.hero .hero-copy p{color:var(--muted); margin:0 0 16px;}
.cta{display:inline-block; padding:10px 16px; background:var(--accent-teal); color:#fff; border-radius:8px; font-weight:600;}
.hero .hero-photo{background:var(--surface); padding:10px; border-radius:12px; display:flex; align-items:center; justify-content:center;}
.hero .hero-photo img{width:100%; height:auto; border-radius:8px; object-fit:cover;}

/* Main layout */
.site-main{display:grid; grid-template-columns: 1fr 320px; gap:var(--gap); margin-top:28px;}
.entry{background:#fff; padding:18px; border-radius:var(--radius); box-shadow: 0 6px 18px rgba(12,12,12,0.04);}
.entry-title{font-size:1.25rem; margin:0 0 8px; color:var(--brand-brown);}
.entry-meta{font-size:0.9rem; color:var(--muted); margin-bottom:12px;}
.sidebar .widget{background:var(--surface); padding:14px; border-radius:12px; margin-bottom:16px;}

/* Blog list */
.post-list{display:grid; gap:16px;}
.post-excerpt{display:flex; gap:14px; align-items:flex-start;}
.post-excerpt img{width:120px; height:80px; object-fit:cover; border-radius:8px;}

/* Footer */
.footer{border-top:1px solid #efefef; padding:26px 0; margin-top:36px; color:var(--muted); font-size:0.9rem; text-align:center;}

/* Responsive */
@media (max-width:1000px){
  .hero{grid-template-columns: 1fr;}
  .site-main{grid-template-columns:1fr;}
  .branding img.logo{height:52px;}
}