:root { --bg: #FFFFFF; --text: #222222; --banner: #F0F0F0; --accent: #444; }

    [data-theme="dark"] { --bg: #121212; --text: #e0e0e0; --banner: #1E1E1E; --accent: #58A6FF; }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      max-width: 900px;
      margin: 2rem auto;
      padding: 0 1rem;
      background-color: var(--bg);
      color: var(--text);
      line-height: 1.6;
      transition: background-color 0.3s, color 0.3s;
    }
    
    header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
    h1 { font-size: 3rem; margin-bottom: 0.2rem; line-height: 1.2; }
    h2 { font-size: 1.4rem; margin: 0 0 1rem 0; background-color: var(--banner); padding: 0.5rem 0.6rem; border-left: 5px solid var(--accent); min-height: 2.2rem; line-height: 1.4; }
    h3 { margin: 1rem 0 0.2rem; font-size: 1.05rem; line-height: 1.3; }
    p, li { font-size: 0.95rem; line-height: 1.4; margin: 0.2rem 0; }
    ul { padding-left: 1.2rem; margin: 0.2rem 0; }

    .professional_summary { margin-top: 2rem; margin-bottom: 2rem; }
    .section { margin-top: 1rem; margin-bottom: 2rem; }
    .two-column { display: flex; flex-wrap: wrap; gap: 2rem; }
    .two-column ul { flex: 1; min-width: 250px; }
    .job-title { font-weight: bold; text-decoration: underline; }
    .location { font-style: italic; }
    
    .navbar { position:sticky; top:0; z-index:1000; display:flex; flex-wrap:wrap; align-items:center; background:#333; padding:.5rem 1rem; width:100%; }
    .navbar a, .navbar button { color:#fff; text-decoration:none; margin-right:1rem; padding:.5rem; background:none; border:none; cursor:pointer; }
    .navbar a:hover, .navbar button:hover { background:#444; border-radius:4px; }
    .navbar button { margin-left:auto; }
    
    .privacy-disclaimer { font-size: 12px; color: #666; text-align: center; margin-top: 40px; padding: 20px; border-top: 1px solid #ccc; }

    @media (max-width: 600px) {
      header { flex-wrap: wrap; }
      .navbar { flex-direction:column; align-items:flex-start; }
      .navbar button { margin-left:0; width:100%; text-align:left; }
      .navbar a { width:100%; margin-right:0; }
    }
    
    .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }   /* Accessible helper for live status text */

    /* --- Contact section layout --- */
      .contact-container {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        justify-content: center;       /* center the two columns within the page */
        align-items: stretch;          /* ensure badge and form share height */
        margin-top: 2rem;
      }
      
      .linkedin-col, .contact-form {
        flex: 1 1 380px;               /* slightly wider min size for nicer side-by-side */
        max-width: 520px;              /* keep each column from getting too wide */
        display: flex;                 /* allow inner card to fill the column */
        align-items: stretch;          /* ensure inner cards take full height */
      }
      
      /* Subtle “card” feel for the form so it reads as a unit */
      .contact-form {
        background: var(--banner);
        border: 1px solid rgba(0,0,0,.08);
        border-radius: 12px;
        padding: 1rem 1.25rem;
        display: flex;
        flex-direction: column;
        height: 100%;
      }
      
      /* Heading centered at top */
      .contact-form h2 {
        margin: 0 0 1rem;
        text-align: center;
        background: none;           /* remove global heading background */
        border-left: none;          /* remove accent bar */
        padding: 0.5rem 0.6rem;     /* keep consistent height */
        min-height: 2.2rem;
      }
      
      /* Form internals */
      .contact-form form {
        flex: 1;                       /* grow to fill remaining space */
        display: grid;
        gap: 0.8rem;
        grid-template-columns: repeat(2, 1fr);   /* email & subject side by side */
      }
      
      @media (max-width: 500px) {
        .contact-form form {
          grid-template-columns: 1fr;   /* stack fields on narrow screens */
        }
      }
      
      .contact-form .form-row {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
      }
      
      .contact-form .form-full {
        grid-column: 1 / -1;
      }
      
      /* Inputs & textarea */
      .contact-form input,
      .contact-form textarea {
        width: 100%;
        padding: 0.65rem 0.8rem;
        border-radius: 8px;
        border: 1px solid #cfcfcf;
        background: var(--bg);
        color: var(--text);
        box-sizing: border-box;        /* prevent overflow from padding */
        transition: border-color .15s ease, box-shadow .15s ease, background-color .2s ease, color .2s ease;
        resize: none;
      }
      
      /* Focus state on text area (accessibility) */
      .contact-form input:focus,
      .contact-form textarea:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
      }
      
      /* Labels a tad bolder for readability */
      .contact-form label {
        font-size: 0.92rem;
        font-weight: 600;
      }
      
      /* Button styling */
      #send-btn {
        justify-self: center; /* center-aligns the button */
        grid-column: 1 / -1;
        padding: 0.65rem 1rem;
        border: 0;
        border-radius: 8px;
        background: var(--accent);
        color: #fff;
        cursor: pointer;
        transition: transform .05s ease, filter .15s ease, opacity .2s ease;
      }
      
      #send-btn:hover { filter: brightness(1.05); }
      #send-btn:active { transform: translateY(1px); }
      #send-btn:disabled { opacity: .65; cursor: not-allowed; }

    /* ---------------------------------------------------------------------------------------------------------------- */
/* Custom badge card — now full height, matching the form */
.li-card {
  --card-bg: var(--banner);
  --card-border: rgba(0,0,0,.08);
  --muted: color-mix(in srgb, var(--text) 70%, transparent);
  --avatar-size: 150px; /* adjusts the size of the avatar picture */

  display: grid;
  grid-template-columns: var(--avatar-size) 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "avatar header"
    "meta   meta"
    "actions actions";
  gap: .5rem 1rem;
  width: 100%;
  height: 91%; /* control height of linkedin card. currently set to be same height as "contact me" card*/
  padding: 1rem 1.25rem;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: var(--card-bg);
  color: inherit;
  text-decoration: none;
  transition: transform .05s ease, box-shadow .15s ease, border-color .15s ease;
}

.li-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); border-color: rgba(0,0,0,.12); }
.li-card:active { transform: translateY(1px); }

.li-avatar {
  grid-area: avatar;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
  align-self: start;
  margin-bottom: 1.125rem;
}

/* Flatten wrappers so children participate directly in grid */
.li-left { display: contents; }
.li-body { display: contents; }

.li-name { font-weight: 750; font-size: 2rem; line-height: 1.2; }
.li-title { font-size: 1.1rem; color: var(--muted); margin-top: .5rem; }
.li-header { grid-area: header; align-self: start; text-align: left; }
.li-meta { grid-area: meta; display: grid; gap: .7rem; }
.li-row { display: inline-flex; align-items: center; gap: .5rem; }
.li-text { font-size: .92rem; }

/* .li-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; } */
/*  */
.li-actions {
  grid-area: actions;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
  justify-self: center;
  align-self: end;
}
/*  */

.li-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: 0.85rem; padding: .3rem .6rem; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.li-icon { width: 16px; height: 16px; fill: currentColor; }

/* Scales nicely on small screens */
@media (max-width: 700px) {
  .linkedin-col, .contact-form { max-width: 100%; }
     .li-card { --avatar-size: 64px; }
}

.hidden-field { position: absolute; left: -9999px; opacity: 0; } /* hidden field for honeypot use */