/* ===========================================================
   STYLE: Dr. Mahdee Jodayree — Personal Academic Homepage
   Desktop: Fixed blue sidebar (300px) + content on right
   Mobile: Sticky top bar with small "Menu ▾" dropdown (fixed overlay)
   =========================================================== */

/* ---------- THEME ---------- */
:root {
  --blue: #0b5ed7;
  --blue-dark: #083d9a;
  --blue-light: #93c5fd;
  --ink: #111827;
  --muted: #374151;
  --bg: #ffffff;
  --border: #e5e7eb;
  --sidebar-border: rgba(255,255,255,0.2);
  --radius: 10px;
  --radius-sm: 8px;

  --mobile-bar-h: 48px; /* consistent mobile header height */
}

/* ---------- RESET & BASE ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
:focus-visible {
  outline: 3px solid rgba(11, 94, 215, 0.45);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ===========================================================
   SIDEBAR (Desktop) / MOBILE HEADER
   =========================================================== */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;          /* top right bottom left */
  width: 300px;
  background: var(--blue);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px 18px;
  border-right: 1px solid var(--sidebar-border);
  overflow-y: auto;
  z-index: 100;               /* desktop base */
}

/* Mobile bar (hidden on desktop) */
.mobile-bar { display: none; }
.mobile-menu {
  appearance: none;
  border: 1px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.12);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}
.mobile-menu:hover { background: rgba(255,255,255,.2); }

/* Desktop vertical nav */
.nav { display: grid; gap: 6px; }
.nav a {
  color: #fff; text-decoration: none;
  padding: 10px 12px; border-radius: var(--radius);
  transition: background .2s ease;
}
.nav a:hover, .nav a:focus { background: rgba(255,255,255,.15); }

/* Sidebar footer */
.contact { font-size: .9rem; margin-top: 16px; color: rgba(255,255,255,.88); }
.contact a { color: var(--blue-light); text-decoration: none; }
.contact a:hover { text-decoration: underline; }

/* ===========================================================
   PAGE LAYOUT (Desktop)
   =========================================================== */
.page { margin-left: 300px; background: var(--bg); }

/* ===========================================================
   MAIN CONTENT
   =========================================================== */
.content { padding: 40px 24px; max-width: 980px; }
.section { padding: 28px 0; }
.section + .section { border-top: 3px solid var(--border); }

/* Blue heading pill */
.section-title{
  display:inline-block;
  font-size:1.6rem;
  color:var(--blue-dark);
  padding:4px 12px 6px 12px;
  border-left:6px solid var(--blue);
  background:linear-gradient(to right, rgba(11,94,215,.08), transparent 70%);
  border-radius:6px 999px 999px 6px;
  margin-bottom:16px;
}

/* Subheads & text */
.content h3 { margin-top: 18px; color: var(--blue); font-size: 1.15rem; }
.content p, .content li { margin-bottom: 8px; color: var(--muted); }
.content ul, .content ol { padding-left: 22px; }
.content a { color: var(--blue); text-decoration: none; }
.content a:hover { text-decoration: underline; }

/* Expertise columns */
.cols { columns: 2; column-gap: 28px; margin-top: 6px; }
.cols li { break-inside: avoid; }

/* ===========================================================
   ABOUT (photo + text)
   =========================================================== */
.about .about-wrap { display: flex; align-items: center; gap: 18px; margin-bottom: 10px; }
.about-photo {
  width: 110px; height: 110px; border-radius: 50%;
  object-fit: cover; border: 3px solid var(--blue);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.name { font-size: 1.8rem; margin-bottom: 4px; color: var(--blue); }
.about-credential { margin: 2px 0; font-weight: 600; color: var(--ink); }
.about-blurb { margin-top: 6px; }

/* ===========================================================
   ANCHOR TARGET OFFSETS
   =========================================================== */
/* Desktop: small offset */
@media (min-width: 961px) {
  section[id] { scroll-margin-top: 16px; }
}
/* Mobile: larger offset (to clear the mobile bar) */
@media (max-width: 960px) {
  section[id] { scroll-margin-top: calc(var(--mobile-bar-h) + 36px); }
}

/* ===========================================================
   MOBILE STYLES
   =========================================================== */
@media (max-width: 960px) {
  /* Turn sidebar into sticky top bar */
  .sidebar {
    position: sticky; top: 0; width: 100%;
    border-right: none; border-bottom: 1px solid var(--border);
    padding: 0;
    z-index: 1000; /* base header layer */
    overflow: visible; /* avoid clipping descendants */
  }

  /* Show mobile bar */
  .mobile-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--blue);
    padding: 10px 12px;
    height: var(--mobile-bar-h);
    position: sticky;
    top: 0;
    z-index: 1001; /* above header base */
  }

  /* Hide desktop vertical nav & footer on mobile */
  .nav, .contact { display: none !important; }

  /* Remove desktop offset; content fills width */
  .page { margin-left: 0; }
  .content { padding: 20px 14px; }

  /* Single-column lists */
  .cols { columns: 1; }

  /* About stacks */
  .about .about-wrap { flex-direction: column; align-items: flex-start; }
  .about-photo { width: 92px; height: 92px; }

  .section { padding: 22px 0; }
  .section-title { font-size: 1.35rem; }
}

/* ===========================================================
   MOBILE DROPDOWN PANEL (outside sidebar)
   =========================================================== */
.mobile-menu-panel {
  display: none;
  position: fixed;                       /* float above page */
  top: calc(var(--mobile-bar-h) + 6px);  /* below the blue bar */
  left: 10px;
  right: 10px;
  max-height: 70vh;
  overflow: auto;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 14px 32px rgba(0,0,0,.18);
  padding: 8px;
  z-index: 9999;                         /* highest */
}
.mobile-menu-panel.open { display: block; }
.mobile-menu-panel a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
}
.mobile-menu-panel a:hover,
.mobile-menu-panel a:focus {
  background: #f3f4f6;
}

/* ===========================================================
   DESKTOP ENFORCERS
   =========================================================== */
@media (min-width: 961px) {
  .mobile-bar, .mobile-menu-panel { display: none !important; }
  .nav { display: grid !important; }
}

/* ===========================================================
   PRINT
   =========================================================== */
@media print {
  .sidebar { display: none; }
  .page { margin-left: 0; }
  .content { padding: 0; }
  a[href^="http"]:after { content: " (" attr(href) ")"; font-size: 90%; }
}


/* ===== Experience blocks ===== */
.xp { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 14px; background: #fff; }
.job-title { margin: 0 0 2px 0; font-weight: 700; color: var(--blue); }
.job-meta { font-size: .95rem; color: var(--muted); margin-bottom: 8px; }
.job-meta .company { font-weight: 600; color: var(--ink); }
.experience-list { padding-left: 20px; }
.experience-list li { margin-bottom: 6px; }