/*
Theme Name: Alamou Sanoussi — Personal Brand
Theme URI: https://alamouhealthgroup.com
Author: Alamou Sanoussi
Description: Custom personal branding theme for Alamou Sanoussi, MD, MPH, MBA, PMP — Medical Epidemiologist & Public Health Leader.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: as-personal
*/

:root{
  --bg:#FAF8F4;
  --bg-alt:#F3EFE6;
  --soft:#E7EFEA;
  --ink:#1B2A2E;
  --ink-dark:#16211F;
  --muted:#4A4640;
  --muted-2:#6B675F;
  --line:#E3DED4;
  --dash:#C7BFA9;
  --accent:#2F6F62;
  --accent-contrast:#FFFFFF;
  --font-display:'Fraunces', serif;
  --font-body:'Source Sans 3', sans-serif;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.5;
}
a{ color:inherit; text-decoration:none; }
a:hover{ opacity:.72; }
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; margin:0; color:var(--ink); }

.as-container{ max-width:1100px; margin:0 auto; padding:0 24px; }
.as-section{ width:100%; padding:96px 0; }
.as-section--alt{ background:var(--bg-alt); }
.as-eyebrow{ font-size:14px; font-weight:700; letter-spacing:.12em; color:var(--accent); margin-bottom:16px; }
.as-h2{ font-size:34px; line-height:1.2; margin-bottom:16px; }
.as-lede{ font-size:17px; line-height:1.75; color:var(--muted); max-width:680px; margin:0 0 16px; }

/* Nav */
.as-nav{
  position:sticky; top:0; z-index:20;
  width:100%; background:rgba(250,248,244,.94);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.as-nav-inner{
  max-width:1100px; margin:0 auto; padding:18px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.as-nav-logo{ font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--accent); }
.as-nav-links{ display:flex; gap:28px; align-items:center; font-size:15px; font-weight:500; }
.as-nav-links a{ white-space:nowrap; }
.as-nav-links a[aria-current="page"]{ color:var(--accent); font-weight:700; }
.as-nav-cta{ background:var(--accent); color:var(--accent-contrast) !important; padding:10px 20px; border-radius:4px; font-weight:600; }
.as-nav-toggle{ display:none; background:none; border:1px solid var(--ink); border-radius:4px; padding:8px 12px; font-size:14px; font-weight:600; color:var(--ink); cursor:pointer; }

/* Hero */
.as-hero{ padding:120px 0 100px; background:linear-gradient(180deg,#F1EDE3 0%,var(--bg) 100%); text-align:center; }
.as-hero-inner{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:20px; }
.as-hero h1{ font-size:48px; line-height:1.15; }
.as-hero p{ font-size:19px; color:var(--muted); max-width:640px; margin:0; }
.as-hero-meta{ font-size:15px; color:var(--muted-2); }
.as-btn-row{ display:flex; gap:16px; margin-top:12px; flex-wrap:wrap; justify-content:center; }
.as-btn{ display:inline-block; padding:14px 28px; border-radius:4px; font-weight:600; font-size:15px; }
.as-btn-primary{ background:var(--accent); color:var(--accent-contrast); }
.as-btn-outline{ border:1px solid var(--ink); color:var(--ink); }
.as-btn-outline-light{ border:1px solid var(--bg); color:var(--bg); }

/* About */
.as-about{ display:flex; gap:64px; align-items:flex-start; }
.as-about-photo-col{ flex:0 0 240px; display:flex; flex-direction:column; gap:16px; }
.as-about-photo{ width:240px; height:280px; border-radius:8px; object-fit:cover; background:var(--soft); border:1px solid var(--dash); }
.as-about-photo-placeholder{ width:240px; height:280px; border-radius:8px; background:var(--soft); border:1px solid var(--dash); display:flex; align-items:center; justify-content:center; color:var(--muted-2); font-size:14px; text-align:center; padding:16px; }
.as-about-photo-col .custom-logo-link{ display:block; width:240px; }
.as-about-photo-col .custom-logo{ width:240px !important; height:280px !important; border-radius:8px; object-fit:cover; background:var(--soft); border:1px solid var(--dash); }
.as-about-langs{ font-size:14px; color:var(--muted-2); line-height:1.6; }
.as-about-body p{ font-size:17px; line-height:1.75; color:var(--muted); margin:0 0 16px; }
.as-chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.as-chip{ border:1px solid var(--dash); border-radius:4px; padding:8px 14px; font-size:13px; font-weight:600; color:var(--muted); }

/* Grids / cards */
.as-grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.as-grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.as-card{ background:#FFFFFF; border:1px solid var(--line); border-radius:8px; padding:28px; }
.as-card h3{ font-size:18px; margin-bottom:10px; }
.as-card p{ font-size:15px; line-height:1.6; color:var(--muted); margin:0; }
.as-card-tag{ font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--accent); margin-bottom:8px; display:block; }
.as-card--dashed{ background:#FFFFFF; border:1px dashed var(--dash); }

/* Home: about teaser + explore cards */
.as-about-teaser{ display:flex; gap:48px; align-items:center; }
.as-about-teaser-photo{ flex:0 0 200px; width:200px; height:230px; border-radius:8px; object-fit:cover; border:1px solid var(--dash); background:var(--soft); }
.as-about-teaser-photo-placeholder{ flex:0 0 200px; width:200px; height:230px; border-radius:8px; background:var(--soft); border:1px solid var(--dash); display:flex; align-items:center; justify-content:center; color:var(--muted-2); font-size:13px; text-align:center; padding:12px; }
.as-explore-card{ background:#FFFFFF; border:1px solid var(--line); border-radius:8px; padding:32px; display:flex; flex-direction:column; gap:12px; transition:border-color .15s ease; }
.as-explore-card:hover{ border-color:var(--accent); opacity:1; }
.as-explore-card h3{ font-size:20px; }
.as-explore-card p{ font-size:15px; line-height:1.6; color:var(--muted); margin:0; flex-grow:1; }
.as-explore-link{ font-size:14px; font-weight:700; color:var(--accent); }

/* Timeline */
.as-timeline-title{ font-size:22px; margin:48px 0 12px; }
.as-timeline-item{ display:flex; gap:24px; padding:18px 0; border-bottom:1px solid var(--line); }
.as-timeline-item:last-child{ border-bottom:none; }
.as-timeline-date{ flex:0 0 180px; font-size:14px; color:var(--muted-2); }
.as-timeline-role{ font-weight:600; font-size:16px; color:var(--ink); }
.as-timeline-org{ font-size:14px; color:var(--muted-2); }

.as-list-title{ font-size:20px; margin-bottom:16px; }
.as-plain-list{ display:flex; flex-direction:column; gap:12px; font-size:15px; color:var(--muted); line-height:1.5; }

/* Blog card image */
.as-blog-thumb{ width:100%; height:120px; object-fit:cover; border-radius:4px; margin-bottom:10px; background:var(--soft); }

/* Contact */
.as-contact{ background:var(--ink); text-align:center; }
.as-contact .as-eyebrow{ color:#9FC2B8; }
.as-contact h2{ color:var(--bg); }
.as-contact p{ color:#D6D2C6; font-size:17px; line-height:1.6; max-width:560px; margin:0 auto 20px; }

/* Footer */
.as-footer{ padding:32px 0; background:var(--ink-dark); }
.as-footer-inner{ max-width:1100px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:13px; color:#9A968C; }

/* Pagination */
.page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 10px; margin-right:6px; border:1px solid var(--line); border-radius:4px; font-size:14px; color:var(--ink); }
a.page-numbers:hover{ border-color:var(--accent); opacity:1; }
.page-numbers.current{ background:var(--accent); border-color:var(--accent); color:#FFFFFF; }

/* Single post / page */
.as-entry{ max-width:760px; margin:0 auto; padding:120px 24px 96px; }
.as-entry-title{ font-size:38px; margin-bottom:12px; }
.as-entry-meta{ font-size:14px; color:var(--muted-2); margin-bottom:32px; }
.as-entry-content{ font-size:18px; line-height:1.8; color:var(--muted); }
.as-entry-content p{ margin:0 0 20px; }
.as-entry-content h2{ font-size:28px; margin:40px 0 16px; }
.as-entry-content img{ border-radius:8px; margin:24px 0; }

@media (max-width: 900px){
  .as-nav-links{ display:none; position:absolute; top:100%; left:0; right:0; background:var(--bg); flex-direction:column; align-items:flex-start; gap:0; border-bottom:1px solid var(--line); }
  .as-nav-links.is-open{ display:flex; }
  .as-nav-links a{ width:100%; padding:14px 24px; border-top:1px solid var(--line); }
  .as-nav-toggle{ display:block; }
  .as-hero h1{ font-size:34px; }
  .as-about{ flex-direction:column; }
  .as-about-teaser{ flex-direction:column; align-items:flex-start; }
  .as-about-photo-col{ flex-direction:row; align-items:center; }
  .as-grid-3, .as-grid-2{ grid-template-columns:1fr; }
  .as-section{ padding:64px 0; }
}