/* styles.css - Formal Medical Single Page Website
   Save this file alongside index.html
*/

/* Reset / base */
:root{
    --bg: #ffffff;
    --muted: #657786;
    --accent: #8B0000; /* deep red */
    --accent-2: #C41E3A; 
    --card: #f7fbfd;
    --border: #e6eef3;
    --radius: 10px;
    --maxw: 1100px;
    --gap: 1.25rem;
    font-family: Inter, "Helvetica Neue", Arial, sans-serif;
    color-scheme: light;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    background:var(--bg);
    color:#102230;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    font-size:16px;
  }
  
  /* Utility */
  .container{
    width: min(94%, var(--maxw));
    margin: 0 auto;
    padding: 2rem 0;
  }
  
  /* Header */
  .site-header{
    border-bottom:1px solid var(--border);
    background: linear-gradient(180deg, #ffffff, #f8fbfd);
    position:sticky;
    top:0;
    z-index:50;
  }
  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:0.9rem;
  }
  .brand .logo{border-radius:6px}
  .brand-text .name{
    font-weight:700;
    font-size:1.05rem;
    color:var(--accent);
  }
  .brand-text .sub{
    font-size:0.85rem;
    color:var(--muted);
  }
  
  /* header contacts */
  .header-contacts{
    display:flex;
    align-items:center;
    gap:0.7rem;
  }
  .header-contacts .phone{
    color:var(--accent);
    text-decoration:none;
    font-weight:600;
  }
  .header-contacts .cta{
    text-decoration:none;
    padding:0.6rem 0.9rem;
    border-radius:8px;
    background:var(--accent);
    color:#fff;
    font-weight:600;
    box-shadow: 0 2px 6px rgba(139,0,0,0.12);
  }
  
  /* Hero */
  .hero{
    padding-top:1.75rem;
    padding-bottom:2rem;
  }
  .hero-grid{
    display:grid;
    grid-template-columns: 1fr 340px;
    gap:2rem;
    align-items:center;
  }
  .hero h1{
    margin:0 0 0.6rem 0;
    font-size:1.85rem;
    color:var(--accent-2);
    line-height:1.1;
  }
  .lead{
    color:var(--muted);
    margin:0 0 1rem 0;
    max-width:56ch;
  }
  .hero-actions{display:flex; gap:0.8rem; margin-bottom:0.9rem;}
  .btn{
    display:inline-block;
    background:var(--accent);
    color:#fff;
    padding:0.6rem 1rem;
    border-radius:8px;
    text-decoration:none;
    font-weight:600;
  }
  .btn.ghost{background:transparent; color:var(--accent); border:1px solid var(--border)}
  .btn.block{display:block; width:100%; text-align:center}
  
  .quick-features{list-style:none; padding:0; margin:0; margin-top:0.6rem; color:var(--muted);}
  .quick-features li{margin-bottom:0.35rem}
  
  /* portrait */
  .hero-portrait{display:flex; align-items:center; justify-content:center;}
  
  /* Sections */
  .section{padding:1.25rem 0;}
  .section h2{margin:0 0 0.75rem 0; color:var(--accent); font-size:1.25rem}
  .about-grid{display:grid; grid-template-columns: 1fr 320px; gap:1.5rem; align-items:start}
  .compact dt{font-weight:700; color:var(--accent-2); font-size:0.95rem}
  .compact dd{margin:0 0 0.85rem 0; color:var(--muted)}
  .sidebar-contact{background:var(--card); padding:1rem; border-radius:12px; border:1px solid var(--border)}
  .sidebar-contact h3{margin-top:0}
  .contact-card{margin-top:0.6rem}
  .contact-line{display:flex; justify-content:space-between; padding:0.45rem 0; border-bottom:1px dashed var(--border)}
  .contact-line .label{color:var(--muted); font-size:0.9rem}
  .muted{color:var(--muted)}
  .disclaimer{font-size:0.85rem; color:var(--muted)}
  
  /* Expertise */
  .expert-list{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0.8rem; list-style:none; padding:0; margin:0}
  .expert-list li{background:#fff; border:1px solid var(--border); padding:0.7rem; border-radius:10px; color:var(--muted)}
  
  /* Timeline */
  .timeline-list{list-style:none; padding:0; margin:0; border-left:3px solid var(--border); padding-left:1rem}
  .timeline-list li{padding:0.7rem 0; position:relative}
  .timeline-list time{display:block; color:var(--accent-2); font-weight:700}
  
  /* Publications */
  .pub-list{list-style:disc; padding-left:1.25rem; color:var(--muted); margin:0}
  
  /* Awards & Teaching */
  .two-col{display:grid; grid-template-columns: 1fr 1fr; gap:1rem}
  .two-col ul{margin:0 0 0.5rem 1.1rem; color:var(--muted)}
  
  /* Contact area */
  .contact-grid{display:grid; grid-template-columns: 1fr 420px; gap:1.5rem; align-items:start}
  .contact-large label{display:block; font-weight:700; color:var(--accent-2)}
  .big-phone{display:inline-block; margin-top:0.25rem; font-size:1.15rem; color:var(--accent); font-weight:700; text-decoration:none}
  .address{white-space:pre-line}
  
  /* contact form */
  .contact-form{background:var(--card); padding:1rem; border-radius:12px; border:1px solid var(--border)}
  .contact-form label{display:block; margin-top:0.6rem; font-weight:700; color:var(--accent-2)}
  .contact-form input, .contact-form textarea{
    width:100%; padding:0.6rem; border-radius:8px; border:1px solid var(--border); margin-top:0.25rem; font:inherit;
    background:white;
  }
  .contact-form .small{font-size:0.85rem}
  
  /* Footer */
  .site-footer{border-top:1px solid var(--border); padding:1rem 0; background:linear-gradient(180deg,#fbfdff,#f6fbfd)}
  .footer-inner{display:flex; justify-content:space-between; gap:1rem; align-items:center; color:var(--muted); font-size:0.95rem}
  
  /* Accessibility helpers */
  .sr-only{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
  
  /* Responsive */
  @media (max-width:980px){
    .hero-grid{grid-template-columns: 1fr 1fr; grid-template-rows:auto; gap:1rem}
    .hero-portrait{order:2}
    .about-grid{grid-template-columns: 1fr; gap:1rem}
    .expert-list{grid-template-columns:1fr}
    .two-col{grid-template-columns:1fr}
    .timeline-list{padding-left:0.6rem}
    .contact-grid{grid-template-columns: 1fr; gap:1rem}
    .header-inner{padding:0.6rem 0}
  }
  
  @media (max-width:560px){
    .brand-text .name{font-size:0.98rem}
    .hero h1{font-size:1.4rem}
    .header-contacts .cta{padding:0.45rem 0.7rem}
  }