/* === main.css === */

/* ... (Alkuosa CSS:stä pysyy samana kuin edellisessä vastauksessa) ... */

/* Perusasetukset & Aputyylit (from original style.css & Bootstrap overrides if needed) */
body {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: #333; /* Default text color */
  background-color: #fff;
  overflow-x: hidden;
}

html {
overflow-x: hidden;
scroll-behavior: smooth;
}

::-moz-selection { background: #a2c8be; color: #fff; }
::selection { background: #a2c8be; color: #fff; }

a {
color: #0056b3;
transition: .3s all ease;
}
a:hover, a:focus {
color: #003d80;
text-decoration: none;
outline: none;
}

h1, h2, h3, h4, h5, h6 {
font-family: "Open Sans", sans-serif;
margin-bottom: 0.75rem;
font-weight: 700;
color: #333; /* Ensure heading color */
}

h2 { font-size: 2.25rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.25rem; font-weight: bold; }

p { margin-bottom: 1rem; color: #555; } /* Ensure paragraph color */
.lead { font-size: 1.2rem; font-weight: 300; color:#444; }

.text-black { color: #000 !important; }
.border-2 { border-width: 2px; }
.rounded { border-radius: 0.3rem !important; }
.shadow { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important; }

/* ---- Osioiden yleiset tyylit ---- */
.site-section {
padding: 6rem 0;
}
.site-section-img {
padding: 0;
position: relative;
}
.section-title {
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #444; /* Ensure section title color */
margin-bottom: 3rem;
}

/* Kuva- ja videokontainerit */
.img-container {
position: relative;
width: 100%;
padding-bottom: 27.08%;
overflow: hidden;
background-color: #eee;
}
.img-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

/* Teksti kuvan päällä */
.overlay-text-img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff; /* White text on image overlay */
text-align: center;
width: 80%;
}
.overlay-text-img h2 {
font-family: "Open Sans", sans-serif;
color: white; /* Explicitly white */
text-transform: none;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
font-size: 3rem;
margin: 0;
}

/* ---- Yksittäisten osioiden tyylit ---- */

/* Header / Navbar */
.site-header {
transition: padding .3s ease-in-out;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
/* sticky-top class from Bootstrap handles the sticking */
}
.site-header .navbar {
padding-top: 0.8rem;
padding-bottom: 0.8rem;
}
.site-header .navbar-brand {
font-weight: bold;
color: #333 !important;
}
.navbar-light .navbar-nav .nav-link {
color: rgba(0,0,0,.6);
padding: 0.8rem 1rem;
font-weight: 600;
transition: color 0.3s ease;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link.active {
color: #0056b3;
}

/* About Section */
.about-section {
background-color: #f8f9fa; /* Light grey background */
}
.about-section img {
  border: 5px solid #fff;
}
.about-section .fa-linkedin {
color: #0077b5;
transition: color 0.3s ease, transform 0.3s ease;
}
.about-section .fa-linkedin:hover {
color: #005582;
transform: scale(1.1);
}

/* News Section */
.news-section {
  background-color: #fff; /* White background */
}
.news-section ul.news-list {
list-style: none;
padding-left: 0;
margin-bottom: 2rem;
}
.news-section ul.news-list li {
padding: 0.8rem 0;
border-bottom: 1px solid #eee;
font-size: 0.95rem;
line-height: 1.6;
color: #444; /* Ensure list item text color */
}
.news-section ul.news-list li:last-child {
border-bottom: none;
}
.news-section .linkedin-feed-container {
background-color: #fff;
border: 1px solid #e9ecef;
max-height: 700px;
overflow-y: auto;
border-radius: 0.3rem;
}
.news-section b {
  font-weight: 700;
  color: #0056b3;
}

/* Experience & Education Sections */
.experience-section,
.education-section {
  background-color: #fff; /* White background */
}
.experience-section .box,
.education-section .box {
padding: 2rem 1rem 2.5rem;
margin-bottom: 2.5rem;
border-bottom: 1px solid #eee;
color: #333; /* Default text color for boxes */
}
.experience-section .box:last-child,
.education-section .box:last-child {
border-bottom: none;
margin-bottom: 0;
}
.experience-logo {
max-height: 55px;
width: auto;
margin-bottom: 1.5rem;
display: block;
margin-left: auto;
margin-right: auto;
transition: filter 0.3s ease, opacity 0.3s ease;
}
.experience-section .box:hover .experience-logo {
filter: grayscale(0%);
opacity: 1;
}
.education-img {
max-width: 250px;
height: auto;
margin-bottom: 1.5rem;
border: 3px solid #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.experience-section h3, .education-section h3 {
  margin-top: 0.5rem;
  margin-bottom: 0.3rem;
  font-size: 1.4rem;
  color: #333; /* Ensure heading color */
}
.experience-section h4, .education-section h4 {
  font-size: 1rem;
  color: #555; /* Ensure subtitle color */
  font-weight: normal;
  margin-bottom: 0.5rem;
}
.experience-section p, .education-section p {
  font-size: 0.95rem;
  color: #444; /* Ensure paragraph color */
}
.experience-section em, .education-section em {
  color: #666; /* Ensure emphasis color */
  font-style: normal;
}

/* Projects Section */
.projects-section-header {
position: relative;
}
.projects-section-header .projects-expand-button-container {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
}
.projects-section {
  padding-top: 3rem;
  padding-bottom: 6rem;
  background-color: #f8f9fa; /* Light grey background */
}
/* Ensure the collapsible section itself is visible when 'show' class is added */
.projects-section.collapse {
  display: none; /* Hide by default */
}
.projects-section.collapse.show {
  display: block; /* Show when expanded */
}
.project-box {
padding: 1.5rem;
background-color: #fff;
border: 1px solid #e9ecef;
border-radius: 0.3rem;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
display: flex;
flex-direction: column;
transition: box-shadow 0.3s ease, transform 0.3s ease;
height: 100%;
color: #333; /* Default text color */
}
.project-box:hover {
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transform: translateY(-3px);
}
.project-box figure { margin-bottom: 1rem; text-align: center; }
.project-box h3 { font-size: 1.3rem; margin-bottom: 0.5rem; color: #333;} /* Ensure heading color */
.project-box h4 { font-size: 0.9rem; color: #6c757d; margin-bottom: 1rem; text-transform: none;} /* Ensure subtitle color */
.project-box p { font-size: 0.95rem; flex-grow: 1; color: #555; } /* Ensure paragraph color */
.project-box .mt-auto { margin-top: auto; padding-top: 1rem; }

.project-img {
max-height: 150px;
width: auto;
max-width: 100%;
height: auto;
object-fit: contain;
display: block;
margin-left: auto;
margin-right: auto;
}
#domain-video {
  max-height: 150px;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 0.2rem;
}

/* Collapsible Project/LinkedIn details */
.collapse .card-body {
font-size: 0.85rem;
background-color: #f8f9fa;
border-top: 1px solid #eee;
color: #444; /* Ensure text color in collapsed area */
}
.collapse .card-body i {
  color: #666; /* Ensure italic text color */
}


/* Footer */
.site-footer {
padding: 4em 0;
background: #343a40;
color: #adb5bd;
font-size: 0.95rem;
}
.site-footer .footer-heading {
font-size: 1rem;
color: #fff;
margin-bottom: 1.5rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.site-footer p { color: #adb5bd; line-height: 1.8; }
.site-footer a { color: #a2c8be; }
.site-footer a:hover { color: #fff; }
.site-footer .list-unstyled li { margin-bottom: 0.5rem; }
.site-footer .border-top { border-top: 1px solid #495057 !important; }
.site-footer .copyright { color: #6c757d; font-size: 0.85rem; }
.site-footer .fa-linkedin { font-size: 1.2rem; color: #a2c8be; transition: color 0.3s ease; }
.site-footer .fa-linkedin:hover { color: #fff; }


/* Buttons (Refined from original style.css and Bootstrap) */
.btn {
font-size: 1rem;
border-radius: 50rem;
padding: 0.6rem 1.5rem;
transition: all 0.3s ease;
letter-spacing: 0.02em;
font-weight: 600;
cursor: pointer; /* Ensure pointer cursor */
}
.btn:hover, .btn:active, .btn:focus {
outline: none;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
transform: translateY(-1px);
}
/* Button colors rely on Bootstrap CDN defaults unless specifically overridden here */
.btn-outline-secondary {
  border-color: #6c757d;
  color: #6c757d;
}
.btn-outline-secondary:hover {
  background-color: #6c757d;
  color: #fff;
}
.btn-sm {
  padding: 0.4rem 1rem;
  font-size: 0.875rem;
}

/* Dropdown arrow animation (relies on Bootstrap JS adding aria-expanded="true") */
.dropdown-toggle::after {
  transition: transform 0.3s ease;
  vertical-align: 0.15em;
}
.dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

/* --- Responsiivisuus --- */
@media (max-width: 991px) {
.site-section { padding: 4rem 0; }
.about-section .col-lg-5 { text-align: center; }
.about-section .fa-linkedin { margin-top: 1rem; }
.navbar-collapse {
   background-color: #fff;
   padding: 1rem;
   border-top: 1px solid #eee;
   box-shadow: 0 4px 8px rgba(0,0,0,0.05);
   position: absolute;
   width: 100%;
   left: 0;
   top: 100%;
   z-index: 1000;
}
.navbar-nav .nav-item {
    margin-bottom: 0.5rem;
    width: 100%;
    text-align: center;
}
.navbar-light .navbar-nav .nav-link {
    padding: 0.8rem 0;
    border-bottom: 1px solid #f8f9fa;
}
 .navbar-light .navbar-nav .nav-item:last-child .nav-link {
     border-bottom: none;
 }
.experience-section .box, .education-section .box {
    padding: 1.5rem 0.5rem 2rem;
}
}

@media (max-width: 767px) {
.overlay-text-img h2 { font-size: 2rem; }
.site-footer { padding: 3em 0; text-align: center; }
.footer-heading { margin-bottom: 1rem; }
.site-footer .col-md-3.ml-auto { margin-left: 0 !important; margin-top: 2rem; }
.site-footer .list-unstyled { text-align: center; }
.project-box { padding: 1rem; }
/* Adjust project box layout for smaller screens */
.projects-section .row > [class*='col-'] {
    margin-bottom: 1.5rem; /* Ensure space between stacked boxes */
}
}

/* Larger screens adjustments */
@media (min-width: 1921px) {
.img-container {
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}
.overlay-text-img {
  max-width: 1200px;
}
}

@media (min-width: 992px) {
#about-section .row > div {
  padding-left: 30px;
  padding-right: 30px;
}
}