/*
Theme Name: Member of Team
Theme URI: https://memberofteam.com
Author: Randy (with GPT-5 Thinking)
Author URI: https://memberofteam.com
Description: A clean, professional WordPress theme for Member of Team — optimized for a hero landing, a blog index, and single posts with featured-image hero, aligning to the maroon brand.
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: member-of-team
*/

:root{
  --brand-dark:#5b1b25;
  --brand:#b23b52;
  --brand-light:#f6e9ec;
  --text:#111827;
  --muted:#6b7280;
  --bg:#ffffff;
  --radius:16px;
  --shadow:0 10px 25px rgba(0,0,0,.08);
}

html{box-sizing:border-box}
*,*:before,*:after{box-sizing:inherit}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif;
  color:var(--text);
  background: #f9fafb;
  line-height:1.6;
}

a{color:var(--brand-dark); text-decoration:none}
a:hover{text-decoration:underline}

.container{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
}

.site-header{
  background: var(--bg);
  border-bottom:1px solid #eee;
  position:sticky;top:0;z-index:20;
}

.navbar{
  display:flex;align-items:center;gap:24px;justify-content:space-between;
  padding:16px 0;
}

.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand .logo{
  width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,var(--brand-dark),var(--brand));
  display:inline-grid;place-items:center;color:white;font-weight:900;
  box-shadow:var(--shadow);
}
.brand .sitename{font-size:18px;letter-spacing:.2px}

.primary-navigation{flex:1;display:flex;justify-content:flex-end;}
.primary-navigation .menu-list{list-style:none;display:flex;gap:20px;margin:0;padding:0;align-items:center;justify-content:flex-end;flex-wrap:wrap;}
.primary-navigation .menu-list > li > a{font-weight:600;color:#374151;padding:6px 0;display:inline-block;}
.primary-navigation .menu-list > li > a:hover{color:var(--brand-dark);}
.nav-cta{margin-left:auto;}
.nav-cta .cta{background:var(--brand-dark);color:#fff;padding:10px 16px;border-radius:999px;box-shadow:var(--shadow);font-weight:700;display:inline-block;}
.nav-cta .cta:hover{filter:brightness(.95);text-decoration:none}

.hero{
  position:relative;
  padding:120px 0 96px;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, #ffffff 0%, #fff 60%, var(--brand-light) 60.1%, #fff 100%);
  background-size:cover;
  background-position:center;
  transition:transform .6s ease;
}
.hero.hero--with-image::before{
  background-image:linear-gradient(rgba(15,23,42,0.6), rgba(15,23,42,0.68)), var(--hero-image);
}
.hero .container{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:36px;
  align-items:center;
}
.hero-body{
  display:flex;
  flex-direction:column;
  gap:28px;
  align-items:center;
  text-align:center;
  max-width:720px;
  margin:0 auto;
}
.hero-copy{max-width:680px;}
.hero-title{font-size: clamp(32px,5vw,54px); line-height:1.1;margin:12px 0 12px 0;font-weight:900}
.hero-sub{font-size: clamp(16px,2.6vw,20px); color:var(--muted); margin:0 auto 24px}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero.hero--with-image{color:#f8fafc;}
.hero.hero--with-image .hero-title{color:#fff;}
.hero.hero--with-image .hero-sub{color:rgba(248,250,252,0.88);}
.hero.hero--with-image .btn.link{color:#f8fafc;}
.hero-widgets{
  display:grid;
  gap:20px;
  width:100%;
}
.hero-widgets .widget{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;}
.hero.hero--with-image .hero-widgets .widget{
  background:rgba(248,250,252,0.92);
  color:#0f172a;
}
.hero.hero--with-image .hero-widgets .widget h3{color:inherit;}

.front-widgets{
  background:var(--brand-light);
  padding:48px 0;
}
.front-widgets .container{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.front-widgets-grid{display:grid;gap:20px;}
.hero--compact{padding:40px 0 10px;text-align:center;}
.hero--compact .container{padding:0;}
@media(min-width:700px){
  .front-widgets-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
}
@media(min-width:900px){
  .hero{padding:140px 0 120px;}
  .hero-widgets{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
}
.btn{display:inline-block;padding:14px 20px;border-radius:999px;font-weight:700}
.btn.primary{background:var(--brand);color:white;box-shadow:var(--shadow)}
.btn.primary:hover{filter:brightness(.95);text-decoration:none}
.btn.link{color:var(--brand-dark)}

.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}

.page-layout{display:grid;grid-template-columns:1fr;gap:24px;margin:24px 0}
.page-layout .card{margin:0}
.page-layout .sidebar{align-self:start}
@media(min-width:900px){.page-layout.page-layout--with-sidebar{grid-template-columns:minmax(0,3fr) minmax(0,1fr)}}

.posts-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:900px){ .posts-grid{grid-template-columns:2fr 1fr} }

.post-item{padding:20px;border-bottom:1px solid #eee;display:grid;gap:12px;}
.post-item:last-child{border-bottom:none}
.post-thumb{display:block;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);}
.post-thumb img{display:block;width:100%;height:100%;object-fit:cover;}
.post-meta{color:var(--brand-dark);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.post-title{font-size:22px;margin:8px 0 6px 0}
.post-excerpt{color:#374151}
.post-readmore{font-weight:600;color:var(--brand-dark);}

.section-divider{border:0;border-top:1px solid #eee;margin:10px 0 20px}

.sidebar .widget{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin-bottom:16px}
.front-widgets .widget{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;text-align:left;}

.post-hero{
  display:block;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin:24px 0;
}
.post-hero .featured{display:block;width:100%;height:auto}
.post-hero .title{padding:24px}
.post-hero .title h1{margin:0;font-size: clamp(32px,4.5vw,44px)}
.post-content{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;margin-bottom:30px}
.post-content img{max-width:100%;height:auto;border-radius:12px}
.post-footer{display:flex;justify-content:space-between;align-items:center;color:var(--muted)}

.post-below-widgets{margin:24px 0 48px;display:grid;gap:20px}
.post-below-widgets .widget{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}

.site-footer{padding:40px 0;color:#6b7280}
.footer-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;align-items:center}
.footer-nav ul,
.footer-nav .footer-menu{list-style:none;display:flex;gap:16px;margin:0;padding:0;flex-wrap:wrap}
.footer-nav a{color:inherit;font-weight:600}
.badge{background:var(--brand-light);color:var(--brand-dark);border-radius:999px;padding:6px 12px;font-weight:700}
.menu-list .sub-menu{display:none;position:absolute;background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:12px 0;margin-top:12px;min-width:200px;}
.menu-list li{position:relative;}
.menu-list li:hover > .sub-menu{display:block;}
.menu-list .sub-menu li{padding:0 20px;}
.menu-list .sub-menu a{display:block;padding:8px 0;color:#374151;}
.menu-list .sub-menu a:hover{color:var(--brand-dark);}
@media(max-width:720px){
  .navbar{flex-wrap:wrap;}
  .primary-navigation{order:3;width:100%;justify-content:flex-start;}
  .primary-navigation .menu-list{justify-content:flex-start;gap:12px;padding:12px 0;}
  .nav-cta{order:2;width:auto;margin-left:0;}
  .hero-body{text-align:center;}
  .menu-list li{width:auto;}
  .menu-list .sub-menu{position:static;box-shadow:none;padding:0;margin-top:0;background:transparent;}
}