/*** PAGE LAYOUT CONTAINERS
 * Flexboxes and containers which provide the basis for laying out elements on screen.
 **/

/* GLOBAL PAGE STYLES */
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}
.black-background {
  background-color: rgb(6,8,9);
}

/* MAIN WINDOW
 * Main window which contains all the scrollable content (everything except header and footer) 
 */
#main-window {
	width: 100%;
  	height: 100%;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: stretch;
}

/* HEADER 
 * Top portion of the viewport that header (nav bar) occupies.
 */
#header-window-portion {
  flex: 1 0 auto;
	width: 100%;
}

/* DEVELOPMENT BANNER */
.dev-banner {
  background:#fgg;
  color:white;
  padding:5px;
  position: fixed;
  border-width: 1px;
  border-style: solid;
  border-color: grey;
  top: 0;
  left: 0;
  z-index: 9999;
}

/* CONTENT
 * Center portion of the viewport that scrollable content (different sections) occupies.
 */
#content-window-portion {
  flex: 0 1 auto;
  overflow: auto;
  /*overflow-y: scroll;*/
}
/* FOOTER
 * Bottom portion of the viewport that footer (link bar) occupies. 
 */
#footer-window-portion {
  flex: 1 0 auto;
	width: 100%;
}

/* Flexbox used for each individual section of the page fit between the header and footer. */
.content-window-page {
  width: 90%;
  margin: 24px auto;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}
.content-window-page * {
  margin: 0;
}
@media screen and (min-width: 1200px) {
  .content-window-page {
    width: 85%;
  }
}

/* Is the full width of the page, used for title screen. */
.full-content-window-page {
	width: 100%;
  margin: 0;
  padding: 0;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: stretch;
}

.simple-row-flexbox {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: stretch;
  width: 100%;
}

/* Grey spacer line between section title and section content. */
.horz-line {
	width: 54px;
	height: 0;
	border-width: 1px;
	border-style: solid;
	border-color: grey;
	margin: 32px 0 32px 0;
}
@media screen and (max-aspect-ratio: 4/5) and (max-width: 800px) {
  .horz-line {
    margin: 16px 0 16px 0;
  }
}

/* Determines the orientation of various flex-boxes in the page depending on the aspect ratio
 * of the screen. */
.flex-box-row {
  flex-flow: row nowrap;
}
@media screen and (max-aspect-ratio: 4/5) {
  .flex-box-row {
    flex-flow: column nowrap;
  }
}
.flex-box-col {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  gap: 32px;
}
.subsection-row-box {
  flex: 1 0 auto;
  padding: 4px 16px 4px 16px;
  background-color: #181a1b;
  font-size: 1.125rem;
  padding: 1rem;
  margin: 1rem 0 1rem 0;
}
.rounded-border {
    border: 1px solid;
    border-radius: 8px;
    /*padding: .25rem .5rem;*/
}


/** HEADER/FOOTER ELEMENTS */

/* Container for elementes in the header and footer of the page. */
.nav-box {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: stretch;
  margin: 16px;
  gap: 16px;
  height: min-content;
}
.nav-link {
  padding: 0;
  text-decoration: none;
  font-size: 1.5rem;
  height: min-content;
}
@media screen and (max-aspect-ratio: 4/5) and (max-width: 800) {
}
 a.nav-link:hover, a.nav-link:active {
  text-decoration: underline;
}

/* Vertical line which seperates navigation entries. */
.line-container {
  width: 22px;
  height: 57.5px; /* TO-DO: Write JS to match this to size of nav text */
  display: flex;
  justify-content: center;
  align-items: center;
}
.vertical-line {
  border-left: 2px solid #303436;
  margin: 0px 0px;
  height: 80%;
}



/*** FONT/TEXT STYLES **/

/* GLOBAL FONT SIZE */
html {
  font-size: 90%;
}
@media screen and (max-aspect-ratio: 4/5) and (max-width: 800px) {
  html {
    font-size: 60%;
  }
}

.section-title {
  margin: 0;
  padding: 0;
}
.text-color {
	color: #f2f3f4;
}
.subtext-color {
	color: #acacac;
}
.highlight-color {
	color: #006b3c;
}
.extra-large-font {
  font-size: 2.2rem;
}
.large-font {
	font-size: 1.8rem;
}
.medium-font {
	font-size: 1.375rem;
}
.small-font {
  font-size: 1.125rem; 
}

:root {
  /* ===========================================================
     FONT SYSTEM
     =========================================================== */

  /* Font Families (overridden by theme files) */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: var(--font-ui);
  --font-body: var(--font-ui);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Font Weights (semantic names for consistency) */
  --weight-light: 300;
  --weight-body: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Line Heights */
  --lh-body: 1.55;
  --lh-heading: 1.25;
  --lh-tight: 1.15; /* useful for compact titles */

  /* ===========================================================
     COLOR SYSTEM
     =========================================================== */

  /* Text Colors */
  --text-primary: #f2f3f4;     /* main readable text */
  --text-secondary: #b5b5b5;   /* less prominent text */
  --text-muted: #888;          /* subtle UI or metadata */
  --text-accent: #4da3ff;      /* highlight, links, open accordions */

  /* Accent shades */
  --accent-bg-soft: rgba(77, 163, 255, 0.08);  /* subtle blue wash */
  --accent-bg-strong: rgba(77, 163, 255, 0.15);
  --accent-border: rgba(77, 163, 255, 0.35);
  --accent-text: var(--text-accent);

  /* UI Element Colors */
  --text-chip-fg: #eaeaea;
  --text-chip-bg: #2b2b2b;
  --text-chip-border: #444;

  /* Optional link and selection accents */
  --link-color: var(--text-accent);
  --selection-bg: rgba(77, 163, 255, 0.25);
}

/* Global typography primitives wired to variables */
body {
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings + section titles use heading family/weight */
h1, h2, h3, .section-title {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
}

/* Utility roles wired to variables (keep existing letter-spacing where useful) */
.card-title, .job-title {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold); /* stronger subheads by default */
}


/* Blue sub-accordion summaries */
.blue-acc > summary {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
}

/* Technologies chips: hard-coded monospace accent */
.tech-chip {
  /*font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;*/
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
}

/* -------- Optional letter-spacing nicety for larger screens -------- */
@media (min-width: 768px) {
  h1.section-title { letter-spacing: 0.3px; }
}


/** CARD STYLES
 * Styles which define the card element used in the work experience entries.
 **/

/* Base */
.accordion {
  width: min(46rem, 90vw);
}

.accordion + .accordion { margin-top: .5rem; }

/* Make the whole summary row clickable and tidy */
.accordion > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem;
  user-select: none;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold); /* slightly stronger for click targets */
  color: var(--text-primary);
}
.accordion[open] > summary {
  color: var(--text-accent);
}
/* Hide default marker (WebKit/Blink) */
.accordion > summary::-webkit-details-marker { display: none; }

.accordion .panel,
.resume-list,
.accordion .panel p,
.accordion .panel li {
  font-family: var(--font-body);
  font-weight: var(--body-weight);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

/* Custom arrow */
.accordion > summary::before {
  content: "▶";
  display: inline-block;
  transform-origin: 0.45em 50%;
  transition: transform 160ms ease;
}
.accordion[open] > summary::before {
  transform: rotate(90deg);
}

/* Body content */
.accordion .panel {
  padding: 0 .75rem .75rem 1.65rem;
}

/* Optional: subtle open/close animation */
@media (prefers-reduced-motion: no-preference) {
  .accordion .panel {
    animation: reveal 180ms ease;
  }
  @keyframes reveal {
    from { opacity: 0; translate: 0 -4px; }
    to   { opacity: 1; translate: 0 0; }
  }
}

/* Optional: subtle typography for the description block */
.about-role p {
  margin: 0 0 .8rem;
  color: var(--text-secondary);
  line-height: var(--lh-tight);
}
.about-role p:last-child { margin-bottom: 0; }

/* Resume block styling */
.resume-entry {
  padding: 0.25rem 0.5rem;
}
.resume-entry h3 {
  margin: 0 0 0.5rem;
  color: #222;
}
.resume-entry ul {
  margin: 0;
  padding-left: 1.25rem;
  list-style-type: disc;
}
.resume-entry ul ul {
  margin-top: 0.35rem;
  list-style-type: circle;
}
.resume-entry li {
  margin: 0.25rem 0;
  line-height: 1.45;
  color: #444;
}

/* Section headers inside panels (kept subtle) */
.panel h4 {
  margin: .25rem 0 .35rem;
  color: #222;
}

/* Technologies layout */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: .75rem .75rem;
  margin-top: .25rem;
}
.tech-group {
  padding: .25rem 0;
}
.tech-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .35rem;
}
.tech-chip {
  display: inline-block;
  padding: .25rem .5rem;
  color: var(--text-chip-fg);
  background-color: var(--text-chip-bg);
  border: 1px solid var(--text-chip-border);
  border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
}

/* Main section chrome */
.exp-accordion > summary {
  padding: .6rem .75rem;
}

/* Blue sub-accordion “cards” */
/*
.blue-acc {
  border: 1px solid;
  border-radius: 10px;
  margin: .5rem 0;
  padding: .15rem .25rem;
}
.blue-acc > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .65rem;
  cursor: pointer;
  font-weight: 600;
}
.blue-acc > summary::-webkit-details-marker { display: none; }
.blue-acc > summary::before {
  content: "▶";
  display: inline-block;
  transform-origin: 0.45em 50%;
  transition: transform 160ms ease;
  opacity: .9;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold); /* slightly stronger for click targets */ /*
  color: var(--text-accent);
}
.blue-acc[open] > summary::before { transform: rotate(90deg); } */

/* Sub-accordion container */
.blue-acc {
  border: 1px solid var(--accent-border);
  /*background-color: var(--accent-bg-soft);*/
  border-radius: 10px;
  margin: 0.5rem 0;
  padding: 0.15rem 0.25rem;
  background-color: color-mix(in srgb, var(--accent-bg-soft) 60%, var(--text-chip-bg));
  border-color: color-mix(in srgb, var(--accent-border) 70%, var(--text-chip-border));
}

/* Sub-accordion summary */
.blue-acc > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.65rem;
  cursor: pointer;

  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.blue-acc[open] > summary {
  color: var(--text-accent);
}

/* Hide default markers */
.blue-acc > summary::-webkit-details-marker {
  display: none;
}

/* Custom arrow using accent color */
.blue-acc > summary::before {
  content: "▶";
  display: inline-block;
  transform-origin: 0.45em 50%;
  transition: transform 160ms ease;
  opacity: 0.9;
  color: var(--text-primary);
}
.blue-acc[open] > summary::before {
  transform: rotate(90deg);
  color: var(--text-accent);
}

/* Sub-accordion panel text */
.blue-panel {
  padding: 0 0.9rem 0.8rem 1.6rem;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  line-height: var(--lh-body);
}

.blue-panel {
  padding: 0 .9rem .8rem 1.6rem;
}

/*.blue-acc {
}*/

.resume-list { margin: 0; padding-left: 1.1rem; }
.resume-list li { margin: .25rem 0; line-height: 1.45; }
.resume-list ul { margin-top: .35rem; list-style-type: circle; }
@media (prefers-reduced-motion: no-preference) {
  .blue-panel { animation: reveal 180ms ease; }
  @keyframes reveal { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }
}