/* ---------------- Root Variables ---------------- */
:root {
    --primary-color: #000000;
   /*--primary-color: #6B21A8;*/
    --text-color: #000;
    --bg-color: #fff;
    --line-color: #555;
    --shadow-color: rgba(0,0,0,0.1);
    --linkedin-color: #555;

    --button-color-box: #ffffff; /* fixed light mode button */
}

/* Dark Mode */
body[data-theme="dark"] {
    --text-color: #fff;
    --bg-color: #111;
    --line-color: #999;
    --shadow-color: rgba(255,255,255,0.1);
    --linkedin-color: #cccccc;
}

/* ---------------- Reset & Base ---------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
}

h5, h6 {
    font-family: 'Inter', sans-serif;
}


/* Headings */
h1,h2,h3,h4 { font-family: 'Lora', serif; }
h1 { font-size: 3rem; line-height: 1; margin-bottom: 1rem; }
h2 { font-size: 2rem; line-height: 1; margin-bottom: 1rem; }
h3 { font-size: 1.5rem; line-height: 1; margin-bottom: 1rem; }

/* h4 for Nav */
h4 { font-size: 1.2rem; line-height: 1.2; margin-bottom: 0.5rem; font-weight: 500;}

/* Subheading */
h5 { font-size: 1.4rem; line-height: 1.2; margin-bottom: 1rem; }
h6 { font-size: 1.2rem; line-height: 1.2; margin-bottom: 1rem; font-weight: 600; }

/* Paragraphs */
p { font-size: 1.1rem; line-height: 1.2; margin-bottom: 2rem; }
.caption { font-size: 1rem; line-height: 1.2; margin-bottom: 2rem; }

.text-group p {
    margin: 2px;      /* remove default spacing */
}

.text-group{
    display: flex;
    align-items: left;
    flex-direction: column;
}

/* Utility class for capitalized + bold text */
.cap { text-transform: uppercase; line-height: 1.2; }
.bold { font-weight: 700; }

/* Divider */
hr { 
    border: none;
    border-top: 1px solid var(--line-color);
    opacity: 0.5;
    margin: 1rem 0;


}/* ---------------- Header / Nav ---------------- */

/* Make header and footer bars full width */
header, footer {
  width: 100%;
  background-color: var(--bg-color);
  padding: 0;                 /* remove inner padding from the bar */
}

header { 
box-shadow: 0 2px 4px var(--shadow-color);
position:sticky;
top: 0;
z-index: 100; /* ensures it stays above content */
}

/* Add inner container that constrains content */
/* Header layout */
header .header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 96px;
  max-width: 1440px;
  margin: 0 auto;
}

/* Logo link */
header .header-inner a {
  display: flex;
  align-items: center;
}

/* Nav layout */
header .header-inner nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2rem;
}

/* Nav items: global for all pages, including project pages */
header nav h4,
header nav h4 a {
    font-size: 1.2rem !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* Project-specific nav overrides */
.project-section header nav h4,
.project-section header nav h4 a,
.case-study header nav h4,
.case-study header nav h4 a {
    font-size: 1.2rem !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* Hover / current state styling for nav items */
header nav h4.current,
header nav h4:hover,
header nav h4.current a,
header nav h4 a:hover {
    font-size: 1.2rem;
    line-height: 1.2;
    color: var(--text-color) !important; /* black/white depending on theme */
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    text-decoration-thickness: 2px !important;
    text-decoration-color: currentColor !important;
    cursor: pointer !important;
}



/* Logo sizing */
.logo-img {
  width: 80px;    /* adjust as needed */
  height: auto;
  display: block;
}

/* By default, assume light theme */
.logo-light {
  display: block;
}
.logo-dark {
  display: none;
}

/* When data-theme="dark" */
body[data-theme="dark"] .logo-light {
  display: none;
}
body[data-theme="dark"] .logo-dark {
  display: block;
}



/* LinkedIn Icon */
.linkedin-icon svg {
  width: 20px;
  height: 20px;
  fill: var(--linkedin-color);
  transition: fill 0.3s;
  cursor: pointer;
}

.linkedin-icon:hover svg,
.linkedin-icon:active svg {
  fill: var(--text-color);
}

/* Dark Mode Toggle 
#theme-toggle {
  cursor: pointer;
  font-size: 1.2rem;
  background: transparent;
  border: none;
  color: var(--text-color);
  transition: color 0.3s;
}*/

/* Circular theme toggle button */
#theme-toggle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Light mode: black circle background, white icon */
body[data-theme="light"] #theme-toggle {
    background-color: #000;
    color: #fff;
}

/* Dark mode: white circle background, black icon */
body[data-theme="dark"] #theme-toggle {
    background-color: #fff;
    color: #000;
}


/* Links normalization */
a, a:visited {
  color: var(--text-color);
  text-decoration: none;
}

a:hover, a:active, a:focus {
  color: var(--line-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ---------------- Buttons ---------------- */
.button {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    border: 2px solid var(--text-color);
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    width: fit-content; 
    margin-bottom: 16px;
}

/* Hover/active effect: inset shadow + semi-transparent overlay */
.button::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--text-color);
    opacity: 0;
    mix-blend-mode: multiply;
    transition: opacity 0.2s ease;
    pointer-events: none;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
    border-radius: 0;
}

.button:hover::before,
.button:active::before {
    opacity: 0.25;
    box-shadow: inset 0 0 12px rgba(0,0,0,0.5);
}

/* ---------------- Container / Layout ---------------- */
.main-container{
    max-width: 1440px;
    padding: 48px 48px;
}

.container {
    max-width: 1200px; /* updated to constrain content */
    padding: 24px 24px;
}

/* ---------------- Global Section Spacing ---------------- 
section {
    margin-top: 4rem;
    margin-bottom: 4rem;
}*/


.project-section {
    display: flex;
    justify-content: center; /* center the grid */
    gap: 1rem;
    padding: 48px;
    background-color: inherit; /* allows inline background-color */
    width: 100%; /* stretch to full viewport width */
}


.desc-box{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 24px;
}

.left-frame {
    flex: 2; /* 2fr */
    min-height: 400px;
    background-size: cover; /* fully cover without tiling */
    background-position: center;
    background-repeat: no-repeat;
}

.right-frames {
    flex: 1; /* 1fr */
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.top-right, .bottom-right {
    flex: 1;
    min-height: 185px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bottom-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
    color: #fff; /* always white */
}

/* Bottom-right button always light mode */
.bottom-right .button {
    color: var(--button-color-box);
    border-color: var(--button-color-box);
    background: transparent;
    position: relative;
    overflow: hidden;
    width: fit-content;
}

/* Hover overlay effect */
.bottom-right .button::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0,0,0,0);
    mix-blend-mode: normal;
    transition: background-color 0.2s ease;
    pointer-events: none;
}

.bottom-right .button:hover::before,
.bottom-right .button:active::before {
    background-color: rgba(0,0,0,0.2); /* subtle darken on hover */
}


/* Footer styling */
footer {
  width: 100%;
  background-color: var(--bg-color);
  box-shadow: 0 -2px 4px var(--shadow-color);
  color: var(--text-color);
}

footer .footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1440px;
  padding: 8px 96px;
  margin: 0 auto;
}

#footer img,
#footer svg {
  width: 22px !important;
  height: 22px !important;
}

/* ---------------- Project Page ---------------- */

/* General container for constrained sections */
.project-container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 120px;
    padding-right: 120px;
    box-sizing: border-box;
}

/* Consistent padding for all sections on project pages 
.section-gap section {
    padding-top: 48px;
    padding-bottom: 48px;
}*/

/* Project Title */
.project-title {
    
    max-width: 1440px;
   padding:  48px  120px 0px 120px ;
   
    box-sizing: border-box;
}

/* Info Section Layout */
.project-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 24px;
}

.info-left {
    max-width: 560px;
    justify-content: space-between;
}

.info-right {
    display: flex;
    max-width: 320px;
    flex-direction: column;
    gap: 1.5rem;
    text-align: right;
     
}

/* Top / bottom margins for headings inside info section are already defined globally via h3 */

/* Project link button */
.project-link {
    margin-top: 16px;
}

.project-link a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.3s;
}

.project-link a:hover {
    text-decoration: underline;
}

/* Full-width image sections */
.fullwidth-image {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.fullwidth-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Case Study Text */
.case-study {
    max-width: 1440px;
    padding-top: 48px;
    padding-bottom: 48px;
    padding-left: 120px;
    padding-right: 120px;
    box-sizing: border-box;
}

/* Images inside case study */
.case-study img.within {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1rem 0;
}

/* ---------------- About Page ---------------- */

/* ---------------- About Page Section Spacing ---------------- */
body.about section {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

/* General intro layout */
.about-intro, .about-story {
  position: relative;
}


.intro-flex {
  display: flex;
  gap: 2rem;
  align-items: stretch; /* makes children same height */
}

.intro-flex > .intro-text,
.intro-flex > .intro-image {
  flex: 1; /* same proportional width; adjust if needed */
  display: flex;
  justify-content: center;
  align-items: left;
}

.side-image {
  width: 100%;
  height: 100%;
  object-fit: contain; /* scales image without cropping */
  display: block;
}


.about-intro .intro-flex,
.about-story .intro-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  max-width: 1200px;
  margin-bottom: 2rem; /* space between rows */
}

.about-story .intro-flex.reverse {
  flex-direction: row-reverse;
}

/* Image styling */
.intro-image img {
  /*width: 35%;*/
  height: auto;
  object-fit: contain;
  box-shadow: 0 4px 8px var(--shadow-color);
  
}

/* Text column */
.intro-text {
  flex: 1.5;
  line-height: 1.6;
}

.intro-flex .intro-image {
    flex: 1;               /* takes proportional column space */
    display: flex;         /* allows image to stretch */
    align-items: stretch;  /* align image to fill vertical space */
}

.intro-flex .intro-image img {
    width: 100%;
    height: 100%;          /* fill parent height */
    object-fit: cover;     /* prevents distortion */
    display: block;
}


.intro-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;             /* horizontal AND vertical gap between columns */
    margin-bottom: 4rem;   /* space between rows */
    align-items: flex-start; 
}




/* Responsive */


@media (max-width: 900px) {
    .intro-flex,
    .intro-flex.reverse {
        flex-direction: column;
        text-align: left;
        margin-bottom: 2rem; /* smaller spacing on mobile */
    }
}




/* Text alignment utilities */
.text-center {
    text-align: center;
}

.no-bullets {
    list-style: none;
    padding-left: 0;
}

/* Awards and speaking sections */
.awards-list a {
    color: var(--text-color);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.3s;
}

.awards-list a:hover {
    color: var(--line-color);
}



/* Organisation logos grid */
.org-logos {
    
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* centers the last row too */
    align-items: center;
    gap: 2rem;
}

.org-logos img {
    height: 70px;
    object-fit: contain;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

/* ---------------- About Page: Awards + Speaking Grid ---------------- */

.about-grid {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    justify-content: space-between;
}

.about-column {
    flex: 1;
    text-align: left;
}

.about-column h2 {
    margin-bottom: 1rem;
}

/* Keep links styled according to theme */
.about-column a {
    color: var(--text-color);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.3s ease;
}

.about-column a:hover {
    color: var(--line-color);
}

/* Side-by-side on larger screens */
@media (min-width: 900px) {
    .about-grid {
        flex-direction: row;
        gap: 4rem;
    }

    .about-column {
        flex: 1;
    }
}
/* ---------------- Contact Modal (refined top-right) ---------------- */
#contact-modal {
    position: fixed;
    top: 64px; /* below header */
    right: 120px;
    width: 350px; /* narrower */
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--line-color);
    box-shadow: 0 4px 20px var(--shadow-color);
    padding: 24px;
    border-radius: 4px;
    z-index: 1000;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 1;
    transform: translateY(0);
}

/* Hidden state */
#contact-modal.hidden {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

/* Close “X” icon */
#close-modal {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--text-color);
    border: none;
    background: transparent;
    transition: opacity 0.2s ease;
}

#close-modal:hover {
    opacity: 0.6;
}

/* Typography + spacing inside modal */
#contact-modal h2 {
    font-family: 'Lora', serif;
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

#contact-modal p {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 0.8rem;
}

/* Email link + copy icon */
#contact-modal a {
    color: var(--text-color);
    text-decoration: underline;
    text-underline-offset: 3px;
}

#copy-email {
    cursor: pointer;
    font-size: 1rem;
    margin-left: 8px;
    vertical-align: middle;
    transition: opacity 0.2s;
}

#copy-email:hover {
    opacity: 0.7;
    
}

.copy-icon {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  transition: opacity 0.2s ease;
}

.copy-icon svg {
  transition: transform 0.2s ease, fill 0.2s ease;
  fill: var(--text-color);
}

.copy-icon:hover svg {
  transform: scale(1.1);
  fill: var(--linkedin-color);
}

/* Fix for header nav on project pages */
body header nav h4,
body header nav h4 a {
    font-size: 1.2rem !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}




/* Section divider 
.section-divider {
    border: none;
    border-top: 1px solid var(--line-color);
    opacity: 0.5;
    margin: 2rem 0;
}*/

/* Quote section 
.quote {
    font-size: 1.5rem;
    font-weight: 600;
    font-style: italic;
    text-align: center;
    padding: 0 24px 48px 24px;
}

.quote span {
    display: block;
    font-size: 1rem;
    font-weight: normal;
}*/

/* Responsive tweaks 
@media (max-width: 1200px) {
    .project-container,
    .project-title,
    .case-study {
        padding-left: 48px;
        padding-right: 48px;
    }

    .info-left, .info-right {
        flex: 1 1 100%;
        max-width: 100%;
        text-align: left;
    }

    .info-right {
        margin-top: 24px;
        text-align: left;
    }
}

@media (max-width: 600px) {
    .project-container,
    .project-title,
    .case-study {
        padding-left: 16px;
        padding-right: 16px;
    }
}*/