/* vim: set ts=2 sw=2 expandtab: */

:root,
:root[data-theme="light"] {
  --sheer-body-font: 'Source San 3';
  --sheer-title-font: 'Lora';

  /* 2. Update the active body variable to load your font, then fallback to Pico's original token */
  --pico-font-family: var(--sheer-body-font), var(--pico-font-family-sans-serif);
  --pico-font-family-display: var(--sheer-title-font), var(--pico-font-family-sans-serif);
}

/* Fix up the skew in combination with blade.css */
.notices p {
  margin-top:  var(--pico-typography-spacing-vertical);
}

#footer {
  padding-block: 10px;
}

#footer ul {
  list-style: none ; 
  list-style-type: none ;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem; /* Increased spacing for clean separation */
  flex-wrap: wrap;
}

/* Ensure parent list items have zero markers */
#footer li {
  list-style: none ;
  list-style-image: none ;
}
#footer li a {
  color: var(--q2-link);
}

#footer li a:hover,
#footer li a:focus {
  text-decoration-thickness: 2px; 
}

#tree-container {
  max-height: 900px;
  width: 100%; 
  display: flex; 
  justify-content: center;
}

#tree-container .stickman {
  fill: #000;
}
#tree-container .trunk {
  fill: #4f2903ff;
}
#tree-container .trunk_edge {
  fill: #6f553be8;
}
#tree-container .canopy {
  fill: #689027ff;
}

/* ==========================================================================
   Base State: Setup element properties before interaction
   ========================================================================== */

/* The interactive group container */
.interactive-node {
  cursor: pointer;
}
.interactive-node:focus {
  outline: none;   
}

/* The solid color fill layer */
.node-shape {
  transition: fill-opacity 0.4s ease, stroke-dashoffset 2s linear, stroke 0.4s ease;
  fill-opacity: 1;
  stroke: transparent;
  stroke-width: 3px;
  stroke-dasharray: 8, 4; /* Creates the dashed pattern */
  stroke-dashoffset: 0;
}

.node-link {
    pointer-events: none; /* Prevents user from clicking text prematurely */
    text-decoration: none;
}

/* Styling for the unicode arrow indicator */
.link-arrow {
    font-size: 1.15rem;
    transition: transform 0.25s ease-in-out;
    display: inline-block;

    /* dx pushes the arrow horizontally away from the text string */
    dx: 6px;
}

/* Enhancing the overall text block to look unmistakably like a link */
.node-text {
    font-family: inherit;
    font-weight: 700;
    font-size: 2.5rem;
    fill: #0B63C5;
    opacity: 0;
    transition: opacity 0.4s ease, fill 0.2s ease;

    /* Adds a clean vector underline natively inside the SVG text engine */
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Subtle micro-interaction: Slide the arrow right when hovered over the link */
.node-link:hover .link-arrow,
.node-link:focus .link-arrow {
    transform: translateX(4px);
    fill: #073e7c; /* Switches to a deeper blue on hover */
}

.node-link:hover .node-text {
    fill: #073e7c;
}

/* ==========================================================================
   Active Click States: Triggers dynamically on user click interaction
   ========================================================================== */
/* 1. When focused by a click, the color shape fades and the dashed stroke appears */
.interactive-node:focus-within .node-shape {
    fill-opacity: 0.15;
    stroke: #0B63C5;
    stroke-dashoffset: 60;
}

/* 2. When focused by a click, the center text reveals itself smoothly */
.interactive-node:focus-within .node-text {
    opacity: 1;
}

/* 3. When focused by a click, the link text becomes active and clickable */
.interactive-node:focus-within .node-link {
    pointer-events: auto;
}

/* Fluid Image illustration {{{ */
.img-right {
    float: right;
    margin-left: 28px;
    margin-bottom: 16px;
    max-width: 35%;
    height: auto;
}
@media (max-width: 640px) {
    .img-right {
        float: none;
        display: block;
        max-width: 100%;
        margin: 0 auto 20px auto;
    }
}
/* }}} */

/* Person Profile {{{1 */

/* Section 1 Grid Setup */

article.person-profile .intro {
    display: grid;
    /* Automatically creates 2 columns if space permits, wraps if screen drops under 280px */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(0.8rem, 4vw, 2.5rem); 
    align-items: center;
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
    width: 100%;
}

article.person-profile .intro-text {
    width: 100%;
    line-height: 1.6;
    margin: 0;
}

article.person-profile .intro-media {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-headshot {
    width: 100%;
    max-width: 350px; /* Limits growth on ultra-wide desktop monitors */
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Responsiveness fallback for smaller displays */
@media (max-width: 640px) {
    article.person-profile .intro {
        grid-template-columns: 1fr; 
        display: flex;
        flex-direction: column-reverse;
        text-align: center; /* Optional: Centers text alignment on small viewports */
    }
    .profile-headshot {
        max-width: 75%; /* Scales down naturally on very tight mobile displays */
        margin-bottom: 0.5rem;
    }
}

/* Page Separation Margins */
article.person-profile .section {
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}


/* timeline style {{{2 */
:root {
  --ink:     #1a1815;
  --ink2:    #4a4742;
  --ink3:    #8a8580;
  --paper:   #f8f5ef;
  --rule:    #d8d0c4;
  --teal:    #1d7d62;
  --purple:  #5a3fa0;
  --amber:   #b86e12;
  --coral:   #b83820;
  --gray:    #5a5650;
  --node-size: 12px;
  --spine-x: 100px;
}
@media (max-width: 640px) {
  :root {
  --spine-x: 60px;
  }
}


ol.timeline {
  list-style-type: none;
  position: relative;
  line-height: 1.6;
  max-width: 680px;
  margin: 0 auto;
  padding: 2.5rem 2rem 3rem var(--spine-x);
  color: var(--ink);
}
ol.timeline::before {
  content: '';
  position: absolute;
  left: calc(var(--spine-x) - 1px);
  top: 8px;
  bottom: 8px;
  width: 1.5px;
  background: var(--rule);
}

.timeline li.event {
  position: relative;
  padding: 0 0 1.3rem 2rem;
}

.timeline li.event:last-child { padding-bottom: 0; }

/* Node dot on the spine */
.timeline li.event::before {
  content: '';
  position: absolute;
  left: calc(-1px - var(--node-size)/2);
  top: 6px;
  width: var(--node-size);
  height: var(--node-size);
  border-radius: 50%;
  background: var(--dot-color, var(--gray));
  border: 2px solid var(--paper);
}

/* Year label left of spine */
.timeline li.event time {
  position: absolute;
  right: calc(100% + 0.9rem + var(--node-size)/2);
  top: 4px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--ink3);
  white-space: nowrap;
  letter-spacing: 0.03em;
}

.timeline li.event h3{
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 0.2rem;
}

.timeline li.event p {
  font-size: 14px;
  color: var(--ink2);
  line-height: 1.5;
  font-style: italic;
}

.timeline li.event .tag {
  display: inline-block;
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 3px;
  margin-bottom: 6px;
  background: color-mix(in srgb, var(--dot-color, var(--gray)) 12%, var(--paper));
  color: var(--dot-color, var(--gray));
  border: 0.5px solid color-mix(in srgb, var(--dot-color, var(--gray)) 30%, var(--paper));
}

.divider {
  border: none;
  border-top: 0.5px dashed var(--rule);
  margin: 0.6rem 0 0.8rem;
  width: 60%;
}

/* color themes */
.teal   { --dot-color: var(--teal);   }
.purple { --dot-color: var(--purple); }
.amber  { --dot-color: var(--amber);  }
.coral  { --dot-color: var(--coral);  }
.gray   { --dot-color: var(--gray);   }

/* 2}}} */

/* 1}}} */

/* Ledger Table Style {{{ */
.section-career-ledger {
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid #eaeaea;
}

.ledger-table {
    width: 100%;
    table-layout: fixed; 
    border-collapse: collapse;
    margin-top: 1.5rem;
    font-family: inherit;
    background-color: #ffffff;
}

/* Clear, explicit desktop column width distribution */
.ledger-table th:nth-child(1) { width: 20%; } /* Years Column */
.ledger-table th:nth-child(2) { width: 25%; } /* Position/Role Column */
.ledger-table th:nth-child(3) { width: 55%; } /* Institution Column */

/* Header Row Styling */
.ledger-table th {
    background-color: #f8f9fa;
    color: #2d3748;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 14px 16px;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
}

/* Data Row Styling */
.ledger-table td a,
.ledger-table td {
    padding: 4px 16px;
    color: #4a5568;
    font-size: 0.95rem;
    line-height: 1.5;
    border-bottom: 1px solid #edf2f7;
    word-wrap: break-word; /* Prevents long names from exploding layout boundaries */
}

/* Subtle Zebra Striping for easy reading */
.ledger-table tbody tr:nth-child(even) {
    background-color: #fdfdfd;
}

/* Row Hover Effect */
.ledger-table tbody tr:hover {
    background-color: #f7fafc;
}


/* ==========================================================================
   Mobile Responsive Transformation (Screens <= 640px)
   ========================================================================== */
@media (max-width: 640px) {

    /* 1. Dissolve the traditional table structural engine */
    .ledger-table,
    .ledger-table thead,
    .ledger-table tbody,
    .ledger-table th,
    .ledger-table td,
    .ledger-table tr {
        display: block;
        width: 100%;
    }

    /* 2. Completely hide the desktop header row accessibly */
    .ledger-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    /* 3. Transform each row into an isolated profile block card */
    .ledger-table tbody tr {
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        margin-bottom: 1.25rem;
        padding: 12px;
        background-color: #ffffff;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    }

    /* 4. Avoid row hover background shifts on touch devices */
    .ledger-table tbody tr:hover {
        background-color: #ffffff;
    }

    /* 5. Set up the text layout grid blueprint inside the card */
    .ledger-table td {
        border: none;
        position: relative;
        padding: 8px 8px 8px 40% !important; /* Pushes content right to create the label track */
        text-align: left;
        font-size: 0.9rem;
    }

    /* 6. Feature the "Years" cell as the card's heading divider */
    .ledger-table td:nth-child(1) {
        font-weight: bold;
        font-size: 1rem;
        color: #3182ce; /* Distinct branding accent color */
        border-bottom: 1px dashed #edf2f7;
        margin-bottom: 10px;
        padding-bottom: 10px !important;
    }

    /* 7. Inject standard textual header tags before the data values */
    .ledger-table td::before {
        position: absolute;
        top: 8px;
        left: 8px;
        width: 35%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: 600;
        color: #718096; /* Soft metadata text color */
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    /* 8. Map custom text values onto the CSS labels match dynamically */
    .ledger-table td:nth-child(1)::before { content: "Timeline"; }
    .ledger-table td:nth-child(2)::before { content: "Position"; }
    .ledger-table td:nth-child(3)::before { content: "Institution"; }
}

/* }}} */

/* Hero Layout constraints {{{ */
.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* The structural hero wrapper */
.page-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 400px;
    display: flex;
    align-items: center;
}

/* Semi-transparent dark overlay to keep the white title text readable */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
}

.page-hero h1 {
    color: #ffffff;
    margin-bottom: 2em;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

/* Fallback header styling if no image is used */
.page-no-hero-header {
    padding: 60px 0 20px 0;
    border-bottom: 1px solid #eeeeee;
}

.page-no-hero-header h1 {
    color: #222222;
    margin: 0;
}

/* Main typography canvas area padding */
.page-body-wrapper {
    padding: 40px 0;
    font-size: 1.1rem;
    line-height: 1.6;
}
.hero-subtitle {
    color: #f0f0f0;
    font-size: 1.8rem;
    text-align: right;
    font-weight: 400;
    max-width: 750px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* }}} */

/* Tweak blog icon spacing {{{ */
.blog-date i {
  margin-left: 0.375rem;
  margin-right: 0.1875rem;
}
/* }}} */

/** Blockquote Style {{{ */
.book-content blockquote {
    border-left: 4px dotted #CCC;
    background: url(../images/blockquote.gif) no-repeat 0.3em 0.3em;
    padding: 1em;
    overflow: hidden;
    margin: 1em auto 1em auto;
    max-width: 90%;
}

/* cite */
.book-content cite {
    font-style: italic;
}

.book-content blockquote cite {
    text-align: right;
    display: block;
}

.book-content blockquote cite:before {
    content: "—";
}

/* q */
.book-content q {
    border: 1px dotted #CCC;
    background: #EEE;
    /* CSS quotes property quotation mark entity numbers can be customized */
    quotes: "\0022" "\0022" "\0027" "\0027";
}
/* }}} */