/* Core colours */
:root {
--site-blue: #17496D;
--site-blue-dark: #123B58;
  --site-ink: #1F2937;
  --site-text: #374151;
  --site-soft-bg: #F4F7FA;
  --site-teal: #2A7F7A;
}

/* General typography */
body {
  color: var(--site-text);
}

h1,
h2,
h3,
.section-heading h1,
.section-subheading {
  color: var(--site-ink);
}

/* Navigation */
#navbar-main {
  border-bottom: 1px solid #E5E7EB;
}

#navbar-main .navbar-brand,
#navbar-main .nav-link {
  color: var(--site-ink);
}

#navbar-main .nav-link:hover,
#navbar-main .nav-link:focus {
  color: var(--site-blue);
}

/* Links */
a {
  color: var(--site-blue);
}

a:hover,
a:focus {
  color: var(--site-blue-dark);
}

/* Buttons */
.btn-primary,
.btn-outline-primary {
  border-color: var(--site-blue);
  color: var(--site-blue);
}

.btn-primary {
  background-color: var(--site-blue);
  color: #FFFFFF;
}

.btn-primary:hover,
.btn-outline-primary:hover {
  background-color: var(--site-blue-dark);
  border-color: var(--site-blue-dark);
  color: #FFFFFF;
}

/* Section spacing and contrast */
.home-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

#featured,
#accomplishments,
#contact {
  background-color: var(--site-soft-bg);
}

/* Make your in-text subheadings feel deliberate */
.article-style h2 {
  margin-top: 2.3rem;
  margin-bottom: 0.8rem;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--site-blue-dark);
}

/* Profile block */
#profile .portrait-title h2 {
  color: var(--site-ink);
}

#profile .portrait-title h3 {
  color: #4B5563;
  line-height: 1.45;
}

/* Social icons */
.network-icon a {
  color: var(--site-blue);
}

.network-icon a:hover {
  color: var(--site-teal);
}

/* Thesis card */
.card {
  border: 1px solid #E5E7EB;
  box-shadow: none;
  border-radius: 8px;
}

.card:hover {
  border-color: #B8CDE0;
}

.site-banner {
height: 280px;
background-image:
linear-gradient(rgba(15, 35, 55, 0.20), rgba(15, 35, 55, 0.20)),
url("/media/banner.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

@media (max-width: 768px) {
.site-banner {
height: 180px;
}
}

.section-banner {
width: 100%;
height: 420px;
margin: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.research-banner {
	height: 360px;
background-image:
linear-gradient(rgba(15, 35, 55, 0.15), rgba(15, 35, 55, 0.15)),
url("/media/research-banner.jpg");
}

.footer-banner {
  height: 520px;
  background-image:
    linear-gradient(rgba(15, 35, 55, 0.18), rgba(15, 35, 55, 0.18)),
    url("/media/footer-banner.jpg");
}

@media (max-width: 768px) {
  .section-banner {
    height: 150px;
  }

  .footer-banner {
    height: 220px;
  }
}

/* Photography section */

.photography-intro {
margin-bottom: 1.5rem;
}

/* Three-column masonry gallery: images retain their original proportions */
.photo-gallery {
column-count: 3;
column-gap: 0.85rem;
}

.gallery-item {
display: block;
width: 100%;
margin: 0 0 0.85rem;
padding: 0;
border: 0;
border-radius: 8px;
overflow: hidden;
background: transparent;
break-inside: avoid;
cursor: zoom-in;
}

.gallery-item img {
display: block;
width: 100%;
height: auto;
border-radius: 8px;
transition: transform 0.25s ease;
}

.gallery-item:hover img {
transform: scale(1.025);
}

/* Image popup */
.lightbox {
display: none;
position: fixed;
z-index: 9999;
inset: 0;
padding: 2rem;
background: rgba(10, 20, 30, 0.92);
align-items: center;
justify-content: center;
cursor: zoom-out;
}

.lightbox.is-open {
display: flex;
}

.lightbox img {
display: block;
max-width: 92vw;
max-height: 88vh;
width: auto;
height: auto;
object-fit: contain;
border-radius: 4px;
cursor: default;
}

.lightbox-close {
position: fixed;
top: 1rem;
right: 1.4rem;
z-index: 10000;
padding: 0;
border: 0;
background: transparent;
color: #FFFFFF;
font-size: 2.5rem;
line-height: 1;
cursor: pointer;
}

@media (max-width: 768px) {
.photo-gallery {
column-count: 2;
}

.lightbox {
padding: 1rem;
}
}

@media (max-width: 480px) {
.photo-gallery {
column-count: 1;
}
}


/* Force the exported Wowchemy site to remain light */
html,
body,
html.dark,
body.dark,
html[data-theme="dark"],
body[data-theme="dark"] {
  color-scheme: light !important;
  background-color: #FFFFFF !important;
  color: #374151 !important;
}

html.dark .page-wrapper,
body.dark .page-wrapper,
html[data-theme="dark"] .page-wrapper,
body[data-theme="dark"] .page-wrapper,
html.dark .page-body,
body.dark .page-body,
html.dark .home-section,
body.dark .home-section,
html.dark .home-section-bg,
body.dark .home-section-bg {
  background-color: #FFFFFF !important;
  color: #374151 !important;
}

html.dark #navbar-main,
body.dark #navbar-main,
html.dark .page-footer,
body.dark .page-footer,
html.dark .site-footer,
body.dark .site-footer,
html.dark .card,
body.dark .card,
html.dark .form-control,
body.dark .form-control {
  background-color: #FFFFFF !important;
  color: #374151 !important;
}

html.dark #accomplishments,
body.dark #accomplishments,
html.dark #contact,
body.dark #contact,
html.dark #photography,
body.dark #photography {
  background-color: #F4F7FA !important;
}

html.dark h1,
html.dark h2,
html.dark h3,
body.dark h1,
body.dark h2,
body.dark h3 {
  color: #1F2937 !important;
}

/* Force readable text in résumé, thesis, and experience cards */
.page-wrapper .card,
.page-wrapper .card.experience,
.page-wrapper .card.experience.course,
.page-wrapper .experience .card-body {
  background-color: #FFFFFF !important;
  color: #374151 !important;
  opacity: 1 !important;
}

/* Main descriptive text inside cards */
.page-wrapper .card .card-text,
.page-wrapper .card.experience .card-text,
.page-wrapper .experience .card-text,
.page-wrapper .card .article-style,
.page-wrapper .card p,
.page-wrapper .card li {
  color: #374151 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Role/title and institution lines */
.page-wrapper .card .card-title,
.page-wrapper .card .card-title a,
.page-wrapper .card .exp-title,
.page-wrapper .card .section-subheading,
.page-wrapper .card .card-subtitle,
.page-wrapper .card .article-metadata,
.page-wrapper .card .text-muted {
  color: #1F2937 !important;
  opacity: 1 !important;
}

/* Slightly softer metadata, but still readable */
.page-wrapper .card .card-subtitle,
.page-wrapper .card .article-metadata {
  color: #4B5563 !important;
}

/* LinkedIn and other outline buttons */
.page-wrapper .btn-outline-primary,
.page-wrapper .btn-outline-primary:visited {
  color: #1F5E8C !important;
  background-color: #FFFFFF !important;
  border-color: #1F5E8C !important;
  opacity: 1 !important;
}

.page-wrapper .btn-outline-primary:hover,
.page-wrapper .btn-outline-primary:focus {
  color: #FFFFFF !important;
  background-color: #17496D !important;
  border-color: #17496D !important;
  opacity: 1 !important;
}

/* Explicit section backgrounds for the live site */
#about,
#links {
  background-color: #FFFFFF !important;
}

#resume,
#accomplishments,
#photography,
#contact {
  background-color: #F4F7FA !important;
}

/* Wowchemy places a background layer inside each section */
#about .home-section-bg,
#links .home-section-bg {
  background-color: #FFFFFF !important;
}

#resume .home-section-bg,
#accomplishments .home-section-bg,
#photography .home-section-bg,
#contact .home-section-bg {
  background-color: #F4F7FA !important;
}

/* Contact form labels and placeholders */
#contact .contact-label {
  display: block;
  margin-bottom: 0.45rem;
  font-weight: 600;
  color: #1F2937 !important;
}

#contact .form-control {
  background-color: #FFFFFF !important;
  color: #374151 !important;
  border: 1px solid #CBD5E1 !important;
}

#contact .form-control::placeholder,
#contact input::placeholder,
#contact textarea::placeholder {
  color: #6B7280 !important;
  opacity: 1 !important;
}

#contact .form-control:focus {
  border-color: #1F5E8C !important;
  box-shadow: 0 0 0 0.15rem rgba(31, 94, 140, 0.16) !important;
}


/* Education section: force readable text in light mode */
.ul-edu,
.ul-edu li,
.ul-edu .description,
.ul-edu p,
.ul-edu .course,
.ul-edu .institution {
  color: #374151 !important;
  opacity: 1 !important;
}

/* Degree title */
.ul-edu .course {
  color: #1F2937 !important;
  font-weight: 600;
}

/* University / institution */
.ul-edu .institution {
  color: #4B5563 !important;
}

/* Graduation-cap icons */
.ul-edu .fa-graduation-cap {
  color: #1F5E8C !important;
}

/* Force the navigation bar to remain visible in light mode */
.page-header {
  display: block !important;
  position: relative;
  z-index: 2000;
}

#navbar-main {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 64px;
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #E5E7EB !important;
  box-shadow: 0 1px 8px rgba(31, 41, 55, 0.06);
  position: relative !important;
  z-index: 2001 !important;
}

#navbar-main .navbar-brand,
#navbar-main .nav-link,
#navbar-main .navbar-toggler,
#navbar-main .navbar-toggler i {
  color: #1F2937 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#navbar-main .nav-link:hover,
#navbar-main .nav-link:focus {
  color: #1F5E8C !important;
}

#navbar-main .navbar-toggler {
  border-color: #CBD5E1 !important;
}

/* Keep the desktop menu visible */
@media (min-width: 992px) {
  #navbar-main .navbar-collapse {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Keep the mobile menu usable when the hamburger is pressed */
@media (max-width: 991px) {
  #navbar-main .navbar-collapse.show {
    display: block !important;
    background-color: #FFFFFF !important;
    padding: 0.5rem 0 1rem;
  }
}

/* Darker link colour */
.page-wrapper a,
.page-wrapper a:visited {
  color: #1B5F86 !important;
}

.page-wrapper a:hover,
.page-wrapper a:focus {
  color: #154A6B !important;
}
}

/* Beyond research */
#beyond-research {
background-color: #F4F7FA;
}

.beyond-research-intro {
max-width: 760px;
margin: 0 auto 3rem;
text-align: center;
}

.personal-subsection {
margin-top: 3.5rem;
}

.personal-subsection h2 {
margin-bottom: 1rem;
color: #1F2937;
}

.music-section {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding-top: 1rem;
}

.video-embed {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
margin-top: 1.5rem;
overflow: hidden;
border-radius: 10px;
background-color: #111827;
}

.video-embed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}

/* Beyond research: one continuous section background */
#beyond-research,
#beyond-research > .home-section-bg {
background-color: #F4F7FA !important;
}

/* Photography and music are subsections, not separate panels */
#beyond-research #photography,
#beyond-research .personal-subsection {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}

/* Spacing between Photography and Music */
#beyond-research .personal-subsection {
margin-top: 3.5rem;
}

#beyond-research .personal-subsection:first-of-type {
margin-top: 2.5rem;
}


/* Divider between Beyond research and Contact */
#contact {
  border-top: 2px solid #D8E0E8 !important;
}

/* Softer blue contact-form button */
#contact .btn-primary {
  background-color: #3F76A8 !important;
  border-color: #3F76A8 !important;
  color: #FFFFFF !important;
}

#contact .btn-primary:hover,
#contact .btn-primary:focus {
  background-color: #2F628F !important;
  border-color: #2F628F !important;
  color: #FFFFFF !important;
}