/* ======================================== */
/* Page-wide Styles                         */
/* ======================================== */

* {
  box-sizing: border-box; /* Include padding and border in element's total width and height */
}

html {
  font-family: sofia-pro, sans-serif;
  scroll-padding-top: 120px; /* To offset for sticky header when using anchor links */
}

body {
  margin: 0;
  padding: 0;
  font-family: "sofia-pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  background: #fff;
  min-width: 320px; /* Prevent page from contracting below 320px on narrow screens */
  min-height: 100vh; /* Ensure body is at least viewport height */
  display: flex; /* Enable flexbox for sticky footer */
  flex-direction: column; /* Stack header, main, footer vertically */
}

.container{
  max-width: 1440px; /* Max width of content area */
  margin: 0 auto;
  padding-inline: 25px; /* Horizontal padding for content area */ 
}

/* ======================================== */
/* Layout Variables                         */
/* ======================================== */

:root {
  --layout-max-width: 1520px;
  --layout-side-gutter: 20px;
  --princeton-orange: rgb(232, 119, 34);
  --princeton-blue: rgb(3, 42, 112);
}

/* ======================================== */
/* HEADER                                   */
/* ======================================== */

header {
  background-color: #121212;
  color: #fff;
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
}

header h1 { /* Site title */
  font-family: sofia-pro, sans-serif; /* Ensure consistent font on all screen sizes */
  font-size: 32px;
  font-weight: 700;
  margin: 0;
  padding: 25px 0 8px; /* Adjusted padding of site title for better alignment */
}

header h1 a {
  color: #fff;
  text-decoration: none;
}

header h1 a:hover {
  color: #fff;
  text-decoration: none;
}

/* Hide the checkbox toggle input */
.menu-toggle {
  display: none; /* CSS-only menu using checkbox hack */
}

/* Link styles (both mobile and desktop) */
header a {
  color: #fff;
  text-decoration: none;
  padding: 8px 0;
}

header a:hover,
header a:focus {
  color: #ccc;
  text-decoration: none;
}

/* Main menu active page and hover styling */
header .main-menu a {
  border-bottom: 3px solid transparent;
  transition: border-color 0.2s;
}

header .main-menu a:hover,
header .main-menu a:focus,
header .main-menu a.active {
  border-bottom-color: var(--princeton-orange);
  color: #fff;
}

/* HEADER: Large display                    */
@media (min-width: 1090.1px) {
  header {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1030;
  }

  /* Hide MENU label and close button on desktop */
  .menu-label,
  .menu-close {
    display: none; /* Desktop uses horizontal navigation */
  }

  header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .navigation {
    display: block; /* Always show on desktop */
  }

  /* Navigation children in column-reverse */
  header nav {
    display: flex;
    flex-direction: column-reverse; /* Stack menus vertically, utility on top */
    align-items: flex-end;
  }

  /* Add a small gap between the two stacked menus */
  header .main-menu {
    margin-top: 8px;
  }

  header ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px; /* Horizontal layout on desktop */
  }
  
  .utility-menu {
    margin-top: 5px;
	font-size: 14px;
  }
}

/* HEADER: Small display settings           */
@media (max-width: 1090px) {
  header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow navigation to wrap to full width */
  }
  
  /* Reduce padding title */
  header h1 {
	padding: 0 0 0;
	font-size: 24px;
  }
  
  /* MENU label in top-right corner - matches site-title styling */
  .menu-label {
    order: 2; /* Position after site title */
    color: #fff;
    cursor: pointer;
    font-family: sofia-pro, sans-serif; /* Match site-title font */
    font-size: 24px; /* Match site-title size */
    font-weight: 700; /* Match site-title weight */
    letter-spacing: normal; /* Match site-title */
    /*padding: 25px 0 8px;  Match site-title padding */
    user-select: none;
  }

  .menu-label:hover {
    color: #ccc; /* Hover effect */
  }

  /* Hide navigation by default on mobile */
  .navigation {
    display: none;
    order: 3; /* Place below header */
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #121212; /* Overlay background */
    z-index: 9999;
    overflow-y: auto;
    padding: 20px; /* Reduced padding for narrow screens */
    box-sizing: border-box; /* Include padding in width calculation */
  }

  /* Show navigation when checkbox is checked */
  .menu-toggle:checked ~ .navigation {
    display: block; /* Show overlay menu */
  }

  /* Close button in top-right of overlay */
  .menu-close {
    position: absolute;
    top: 16px;
    right: 16px;
    color: #fff;
    font-size: 32px;
    font-weight: 300;
    cursor: pointer;
    user-select: none;
    line-height: 1;
  }

  .menu-close:hover {
    color: #ccc; /* Hover effect for close button */
  }

  /* Vertical menu layout on mobile */
  header nav {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  header ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; /* Vertical menu items */
    gap: 0;
  }

  header li {
    border-bottom: 1px solid #333; /* Separator between items */
  }

  header li:last-child {
    border-bottom: none; /* Remove border from last item */
  }

  header a {
    display: block;
  }

  /* Main menu first, then utility menu on mobile */
  .main-menu {
    order: 1; /* Main menu appears first */
  }

  .utility-menu {
    order: 2; /* Utility menu appears second */
    margin-top: 16px;
	font-size: 12px;
  }
}


/* ======================================== */
/* MAIN CONTENT                             */
/* ======================================== */

main {
  width: 100%;
  padding-bottom: 32px;
  flex: 1; /* Grow to fill available space, pushing footer to bottom */
}

main a {
  text-decoration: none;
}

body.home main .container {
  display: flex;
  flex-direction: row;
  gap: 25px;
  padding-top: 25px;
}

body.home main .container > aside {
  flex: 0 0 25%;
  padding-top: 7px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: "sofia-pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 24px;
  margin-bottom: 16px;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 24px;
}

strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

/* Visually hide the main h1 on content pages */
main > h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Show h1 on homepage */
body.home main > h1 {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
}

article > h2:first-child {
  margin-top: 0;
}

p {
  margin-bottom: 16px;
}

/* Remove top margin from first paragraph in article */
article > p:first-child {
  margin-top: 0;
  padding-top: 0;
}

a {
  color: var(--princeton-blue);
  text-decoration: none;
  font-family: "sofia-pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
}

/* MAIN CONTENT: Lists             */
ol, ul {
  margin: 0 0 16px 0;
  padding-left: 32px;
}

li {
  margin-bottom: 8px;
}

/* MAIN CONTENT: Images            */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

figure {
  margin: 16px 0;
  text-align: center;
}

figure img {
  margin: 0 auto;
}

/* MAIN CONTENT: Aside (sidebar)            */
aside {
  text-align: center;
}

/* Headshot image */
aside > img {
  max-width: 100%; /* Allow image to scale down on small screens */
  width: 100%; /* Make image fill container */
  height: auto; /* Maintain aspect ratio */
  margin: 0 auto; /* Center the constrained image */
}

@media (min-width: 333px) {
  aside > img {
    max-width: 333px; /* Limit headshot to 333px width on larger screens */
  }
}

aside h2 {
  margin-top: 24px;
  font-size: 24px;
}

aside p {
  line-height: 1.4;
}

/* Social media icons */
aside figure {
  display: inline-block;
  margin: 8px;
}

aside figure img {
  width: 30px;
  height: auto;
}

/* CV Button in sidebar */
aside a[href*="cv"] {
  display: inline-block;
  padding: 8px 24px;
  border: 2px solid var(--princeton-blue);
  color: var(--princeton-blue);
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  transition: all 0.2s;
}

aside a[href*="cv"]:hover {
  background-color: var(--princeton-blue);
  color: #fff;
  text-decoration: none;
}

/* MAIN CONTENT: Small display              */
@media (max-width: 1090px) {
  body.home main .container {
    flex-direction: column;
  }
}


/* ======================================== */
/* FOOTER                                   */
/* ======================================== */
footer {
  background-color: #121212;
  color: #fff;
  width: 100%; /* Removed padding and margin-top */
  box-shadow: 0 50vh 0 50vh #121212; /* Extend black background beyond footer without adding scroll */
}

footer .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px; /* Reduced gap on narrow screens */
  padding-bottom: 16px; /* Add bottom padding on narrow screens */
}

footer .footer-address {
  text-align: center;
}

footer .footer-logo {
  width: 100%;
  max-width: 150px;
}

footer .footer-logo img {
  width: 100%;
  height: auto;
  display: block; /* Ensures logo is visible and responsive */
}

footer a {
  color: #fff;
}

footer a:hover {
  color: #ccc;
}

footer p {
  margin: 8px 0;
}


/* ======================================== */
/* FOOTER: Small display                    */
/* ======================================== */
@media (min-width: 700px) {
  /* Switch to centered row-wise footer */
  footer .container {
    flex-direction: row;
    justify-content: space-between; /* Address left, logo right on wide screens */
    align-items: center;
    gap: 32px; /* Restore larger gap on wide screens */
    padding-bottom: 0; /* Remove bottom padding on wide screens */
  }

  footer .footer-address {
    text-align: left; /* Left-align address on wide screens */
  }

  footer .footer-logo {
    max-width: 180px; /* Right-aligned logo size on wide screens */
  }
}