/*
 * UW Madison Theme - V12 (Final Header Layout)
 */

/* 1. Define the Color Palette */
:root {
  --page-bg-soft: #F8F9FA;
  --card-bg-white: #FFFFFF;
  --border-color-subtle: #E9ECEF;
  --badge-bg-color: #F1F3F5;
  --uw-red: #C5050C;
  --uw-dark-red: #9B0000;
  --text-color-main: #212529;
  --text-color-secondary: #495057;
  --bg-page: var(--page-bg-soft);
  --card-bg: var(--card-bg-white);
  --accent-primary: var(--uw-red);
  --accent-secondary: var(--uw-dark-red);
  --text-color-dark: var(--text-color-main);
  --text-color-light: #FFFFFF;
  --shadow-color: rgba(0,0,0,0.05);
  --shadow-color-hover: rgba(0,0,0,0.1);
  --clock-bg: #EAEAEA;
}

/* 2. Global Styling & Final Refinements */
body { background: var(--bg-page); color: var(--text-color-dark); }
.card { border: 1px solid var(--border-color-subtle); }
h2, .profile-about-area h3 { color: var(--accent-primary); }
.section-card-alt h2, .tools-section-in-profile h2 { border-bottom-color: var(--accent-primary); }
a { color: var(--accent-primary); }
a:hover { color: var(--accent-secondary); }
.btn, .project-link-btn { background: var(--accent-primary); color: var(--text-color-light); }
.btn:hover, .project-link-btn:hover { background: var(--accent-secondary); }
.profile-photo { border-color: var(--accent-primary); }
.experience-list { display: flex; flex-direction: column; gap: 1.25em; }
.profile-intro-fullwidth-block { margin-bottom: 0.6em !important; }
.section-heading { font-size: 1.6em; color: var(--accent-primary); border-bottom: 0.125rem solid var(--accent-primary); padding-bottom: 0.3em; margin-bottom: 0.8em; font-weight: 600; margin-top: 0.75em; }
.tools-section-in-profile { margin-top: 1em !important; }

/* HEADER REFINED: Main content wrapper */
.profile-content-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Vertically aligns text block and icon block */
  width: 100%;
}

/* HEADER REFINED: Icon layout */
.nav-icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8em;
  margin: 0;
}
.nav-icons a {
  margin-left: 0;
  font-size: 1.4em;
  color: var(--text-color-dark);
}
.nav-icons a:hover {
  color: var(--accent-primary);
}


/* 3. Main Page Grid Layout */
.page-content-container {
  display: grid;
  grid-template-columns: 0.9fr 0.9fr 1.2fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "profile experiences projects"
    "profile resume-area resume-area";
  gap: 1.25em; padding: 1.25em 1%; margin: 0 auto;
  width: 98%; max-width: 118.75rem;
}
#profile-area { grid-area: profile; }
#experiences-area { grid-area: experiences; }
#projects-area { grid-area: projects; }
#resume-area { grid-area: resume-area; }

/* 4. Resume Button Area */
#resume-area { display: flex; align-items: center; justify-content: center; background: transparent; border: none; box-shadow: none; padding: 0; }
.resume-button-large {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; padding: 1.5em;
  font-size: 1.2em; font-weight: 600; text-decoration: none;
  border-radius: var(--border-radius-main);
  background: var(--accent-primary); color: var(--text-color-light);
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}
.resume-button-large:hover { background: var(--uw-dark-red); transform: translateY(-4px); box-shadow: 0 .375rem 1rem var(--shadow-color-hover); }
.resume-button-large i { margin-right: 0.7em; font-size: 1.1em; }

/* 5. Unified Badge Styles (UW-Madison & Experiences) */
.uw-subcard, .experience-badge { padding: 1.5em; border: 1px solid var(--border-color-subtle); border-radius: var(--border-radius-small); background-color: var(--card-bg-white); }
.uw-subcard { margin-top: 0; }
.subcard-header, .badge-header { display: flex; align-items: center; gap: 1em; border-bottom: 1px solid var(--border-color-subtle); padding-bottom: 1em; margin-bottom: 1.2em; }
.uw-logo-container, .badge-logo-container { flex: 0 0 20%; margin-right: 0.5em; }
.uw-crest-large, .badge-logo { width: 100%; height: auto; max-height: 55px; object-fit: contain; }
.uw-header-text, .badge-header-text { display: flex; flex-direction: column; justify-content: center; }
.university-name, .badge-title { font-size: 1.2em; font-weight: 600; color: var(--text-color-main); margin: 0; line-height: 1.3; }
.university-dates, .badge-subtitle { font-size: 0.95em; color: var(--text-color-secondary); margin: 0; padding-top: 0.15em; }
.subcard-body h4, .badge-body h4 { font-size: 1.1em; font-weight: 600; color: var(--text-color-main); margin-bottom: 0.8em; }

/* UW-Madison: Degrees Section */
.degrees-section { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5em; }
.degrees-section h4 { margin-bottom: 0; }
.degree-badges-container { display: flex; flex-wrap: wrap; gap: 0.6em; justify-content: flex-end; }

/* UW-Madison: Coursework Section */
.course-badges-container { display: flex; flex-wrap: wrap; gap: 0.6em; }
.degree-badge, .course-badge { display: inline-block; background-color: var(--badge-bg-color); color: var(--text-color-main); padding: 0.4em 0.9em; border-radius: 1em; font-size: 0.85em; font-weight: 500; border: 1px solid #DEE2E6; white-space: nowrap; }

/* Experience Badge Body */
.badge-body ul { list-style: disc; padding-left: 1.3em; font-size: 0.9em; display: flex; flex-direction: column; gap: 0.5em; }

/* 6. Simple Experience Item Styling (Skyscanner) */
.experience-item-simple { padding: 1.2em; border: 1px solid var(--border-color-subtle); border-radius: var(--border-radius-small); }
.experience-item-simple h3 { font-size: 1.3em; color: var(--accent-primary); margin-bottom: .2em; }
.experience-item-simple .experience-meta { font-size: .9em; color: #666; margin-bottom: .5em; font-style: italic; }
.experience-item-simple ul { list-style: disc; padding-left: 1.3em; font-size: 0.9em; }
.experience-item-simple ul li { margin-bottom: .3em; }