/* =========================================================
   GLOBAL PORTFOLIO STYLE — ORDERED 1 TO 10 CONTROL GUIDE
   =========================================================

   This stylesheet is the default visual standard for:
   - index.html
   - research.html
   - projects/mobile-grocery/index.html

   IMPORTANT:
   Each numbered spacing control appears ONCE and ONLY ONCE.
   If you want to change spacing number 3, go to section 3.
   No more "3 + 4" sections and no more hunting elsewhere.

   Special components such as maps, charts, drawers, schedules,
   accordions, etc. can still override these defaults with more
   specific selectors when genuinely needed.
   ========================================================= */


/* =========================================================
   GLOBAL FIXED RULES — NOT ONE OF THE 1–10 SPACING CONTROLS
   ========================================================= */

* {
    box-sizing: border-box;
}

body {
    font-family: Georgia, "Times New Roman", serif;
    margin: 0;

    /* Bottom of final page content -> bottom browser edge.
       This is not one of the numbered controls in the screenshot. */
    padding-bottom: 0;

    line-height: 1.7;
    color: #222;
}

/* Normal paragraph writing rules.
   Paragraphs themselves do NOT add top/bottom spacing here.
   This keeps numbered gaps 4, 5 and 9 controlled in one place only. */
p {
    margin: 0;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

/* If two ordinary paragraphs appear directly one after another,
   this gives them a readable 12px separation without interfering
   with the numbered heading gaps. */
p + p {
    margin-top: 12px;
}

/* Fixed heading sizes.
   Their spacing is controlled later by the numbered sections. */
h1 {
    font-size: 30px;
}

h2 {
    font-size: 24px;
}

h3 {
    font-size: 20px;
}

/* Fixed link styling */
a {
    color: #28548a;
}

body > nav a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

body > nav a:hover {
    text-decoration: none;
    opacity: 0.8;
}

/* =========================================================
   1. TOP OF BROWSER -> NAVIGATION
   =========================================================

   WHAT YOU SEE:

   browser top
        ↓ 24px
   Home   Research   Publications   Contact

   CHANGE THIS NUMBER:
   padding-top: 24px;

   Smaller = menu moves UP.
   Larger  = menu moves DOWN.
   ========================================================= */

body {
    padding-top: 0;
}


/* =========================================================
   2. NAVIGATION -> HORIZONTAL LINE
   =========================================================

   WHAT YOU SEE:

   Home   Research   Publications   Contact
                     ↓ 20px
   -----------------------------------------

   CHANGE THIS NUMBER:
   margin-bottom: 20px;

   Smaller = line moves CLOSER to the nav.
   Larger  = line moves FARTHER from the nav.

   The horizontal spacing between Home / Research / etc.
   is controlled separately by gap: 24px below.
   ========================================================= */

body > nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 28px;

    margin-left: -36px;
    margin-right: -36px;
    margin-bottom: 0px;

    padding-top: 18px;
    padding-right: 36px;
    padding-bottom: 18px;
    padding-left: 264px;

    background: linear-gradient(
        90deg,
        #28548a 0%,
        #4a3f82 38%,
        #5b1b67 100%
    );

    font-family: Arial, sans-serif;
    font-size: 15px;
}


/* =========================================================
   3. HORIZONTAL LINE -> MAIN PAGE TITLE
   =========================================================

   WHAT YOU SEE:

   -----------------------------------------
                ↓ 8px
   Research

   CHANGE THIS NUMBER:
   margin-bottom: 8px;

   Smaller = "Research" moves UP toward the line.
   Larger  = "Research" moves DOWN away from the line.

   THIS is the only numbered control for gap 3.
   ========================================================= */

hr {
    border: none;
    border-top: 1px solid #ddd;

    margin-top: 0;
    margin-bottom: 0;
}


/* =========================================================
   4. MAIN PAGE TITLE -> FIRST DESCRIPTION
   =========================================================

   WHAT YOU SEE:

   Research
      ↓ 8px
   My research focuses on the design and evaluation...

   CHANGE THIS NUMBER:
   margin-bottom: 8px;

   Smaller = description moves UP.
   Larger  = description moves DOWN.
   ========================================================= */

h1 {
    /* Keep top margin at zero so it does not interfere with #3 */
    margin-top: 0;

    /* #4 — change THIS value */
    margin-bottom: 8px;
}


/* =========================================================
   5. FIRST DESCRIPTION -> SECTION TITLE
   =========================================================

   WHAT YOU SEE:

   My research focuses on the design and evaluation...
                     ↓ 22px
   Selected Research Projects

   CHANGE THIS NUMBER:
   margin-top: 22px;

   Smaller = section title moves UP.
   Larger  = section title moves DOWN.

   Normal paragraphs have margin-bottom: 0, so this number
   controls this gap directly.
   ========================================================= */

h2 {
    margin-top: 18px;
}


/* =========================================================
   6. SECTION TITLE -> BLUE PROJECT DIVIDER
   =========================================================

   WHAT YOU SEE:

   Selected Research Projects
                ↓ 12px
   =========================================  blue line

   CHANGE THIS NUMBER:
   margin-bottom: 12px;

   Smaller = blue divider moves UP toward the H2.
   Larger  = blue divider moves DOWN.

   .research-project has margin-top: 0 so it does not add
   another hidden contribution to this gap.
   ========================================================= */

h2 {
    margin-bottom: 12px;
}

.research-project {
    margin-top: 0;
}


/* =========================================================
   7. BLUE PROJECT DIVIDER -> PROJECT TITLE
   =========================================================

   WHAT YOU SEE:

   =========================================  blue line
                ↓ 18px
   UK Mobile Food Access Network Optimisation

   CHANGE THIS NUMBER:
   padding-top: 18px;

   Smaller = project title moves UP toward the blue line.
   Larger  = project title moves DOWN.

   h3 top margin is forced to zero so number 7 is controlled
   ONLY by this padding-top value.
   ========================================================= */

.research-project {
    border-top: 2px solid #28548a;
    padding-top: 18px;
}

.research-project h3 {
    margin-top: 0;
    color: #28548a;
}

/* links and addition
   ========================================================= */

.home-name {
    margin-bottom: 6px;
}

.home-role {
    margin-top: 0;
    margin-bottom: 8px;
}

.home-about-title {
    margin-top: 0;
}   


.research-project + .research-project {
    margin-top: 24px;
}

.research-all-link {
    margin-top: 24px;
}

/* =========================================================
   8. PROJECT TITLE -> AFFILIATION
   =========================================================

   WHAT YOU SEE:

   UK Mobile Food Access Network Optimisation
                  ↓ 10px
   Synthetic public case study · Waterloo–Kitchener, Ontario

   CHANGE THIS NUMBER:
   margin-bottom: 10px;

   Smaller = affiliation moves UP.
   Larger  = affiliation moves DOWN.

   This is the only numbered control for gap 8.
   ========================================================= */

.research-project h3 {
    margin-bottom: 10px;
}


/* =========================================================
   9. AFFILIATION -> PROJECT DESCRIPTION
   =========================================================

   WHAT YOU SEE:

   Synthetic public case study · Waterloo–Kitchener, Ontario
                  ↓ 12px
   An integrated multi-objective optimisation framework...

   CHANGE THIS NUMBER:
   margin-bottom: 12px;

   Smaller = description moves UP.
   Larger  = description moves DOWN.

   The following paragraph has margin-top: 0, so this value
   controls the gap directly.
   ========================================================= */

.research-affiliation,
.affiliation {
    /* Keep top margin at zero so it does not add hidden spacing */
    margin-top: 0;

    /* #9 — change THIS value */
    margin-bottom: 12px;

    color: #666;
}


/* =========================================================
   10. LEFT + RIGHT BROWSER EDGE -> PAGE CONTENT
   =========================================================

   WHAT YOU SEE:

   browser edge
       ← 36px → page layout ← 36px →
                                  browser edge

   CHANGE THESE NUMBERS:
   padding-left: 36px;
   padding-right: 36px;

   Smaller = content becomes WIDER / moves toward edges.
   Larger  = content becomes NARROWER / moves inward.

   Example:
   24px = wider page
   36px = current experimental setting
   60px = more breathing room
   ========================================================= */

body {
    padding-left: 36px;
    padding-right: 36px;
}


/* =========================================================
   QUICK REFERENCE
   =========================================================

   1  browser top -> nav
      body padding-top

   2  nav -> horizontal line
      nav margin-bottom

   3  horizontal line -> "Research"
      hr margin-bottom

   4  "Research" -> first description
      h1 margin-bottom

   5  description -> "Selected Research Projects"
      h2 margin-top

   6  "Selected Research Projects" -> blue divider
      h2 margin-bottom

   7  blue divider -> project title
      .research-project padding-top

   8  project title -> affiliation
      .research-project h3 margin-bottom

   9  affiliation -> project description
      .research-affiliation / .affiliation margin-bottom

   10 left/right browser edge -> page content
      body padding-left + padding-right

   ========================================================= */


/* =========================================================
   EXPERIMENTAL LOCAL PAGE NAVIGATION
   =========================================================

   Desktop layout:
   [ local sidebar ] [ main page content ------------------- ]

   The sidebar turns the former blank left margin into useful
   page navigation. Main content uses the remaining width.

   MAIN CONTROLS:
   sidebar width  -> 180px
   sidebar/content gap -> 36px
   outer browser margin -> body control #10 above
   ========================================================= */

.page-layout {
    min-height: calc(100vh - 78px); /* full viewport below the top navigation */
    position: relative;

    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 28px;

    align-items: start;
    width: 100%;
}

.page-layout::before {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;

    left: -36px;
    width: 236px;

    background: linear-gradient(
        180deg,
        #eef3fa 0%,
        #f3edf7 100%
    );

    z-index: -1;
}

.page-sidebar {
    position: sticky;
    top: 0;
    align-self: start;

    margin-left: -36px;

    padding-top: 28px;
    padding-right: 2px;
    padding-bottom: 28px;
    padding-left: 28px;

    background: transparent;

    font-family: Arial, sans-serif;
}

.page-sidebar-label {
    display: block;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: #5b1b67;
}

.page-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0;

    margin: 14px 0 0;
    padding: 0;

    background: none;
    border: none;
    border-radius: 0;
}

.page-sidebar-nav a {
    position: relative;
    display: block;
    padding: 8px 12px 8px 0;
    color: #28548a;
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.4;
}

.page-sidebar-nav a:hover {
    color: #5b1b67;
    opacity: 1;
}

.page-sidebar-nav a.active {
    color: #5b1b67;
    font-weight: 600;
}

.page-sidebar-nav a.active::after {
    content: "";

    position: absolute;
    right: -2px;
    top: 8px;
    bottom: 8px;

    width: 3px;

    background: #5b1b67;
}

body > nav a.active {
    position: relative;
}

body > nav a.active::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;

    height: 2px;

    background: #eef3fa;
}

.page-content {
    min-width: 0;
    padding-top: 22px;
    padding-bottom: 0;
}

/* Keep anchor targets from sitting hard against the browser top. */
.page-content [id] {
    scroll-margin-top: 24px;
}

.contact-list {
    margin-top: 8px;
}

.contact-list p {
    margin-top: 6px;
}

.contact-icon {
    display: inline-block;
    width: 22px;
    color: #5b1b67;
    font-family: Arial, sans-serif;
}

/* On narrower screens, return to one clean content column. */
@media (max-width: 900px) {
    body {
        padding-left: 24px;
        padding-right: 24px;
    }

    body > nav {
        margin-left: -24px;
        margin-right: -24px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .page-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .page-sidebar {
        display: none;
    }
}

/* One shared portrait definition: Home and CV use images/po.jpg. */
.about-photo {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    display: block;
    flex: 0 0 auto;
}
@media (max-width: 850px) {
    .about-photo { width: 200px; height: 200px; }
}

/* v7.3 — copyright: equal space above and below text, no extra page-bottom gutter. */
.page-content > .portfolio-copyright {padding-top:28px!important;padding-bottom:28px!important;margin-bottom:0!important;}