/* Color Variables - Added 2025-05-29 */
:root {
  /* Brand Colors */
  --color-background: #F5EBDF;
  --color-primary: #083456;
  --color-primary-dark: #0a4675;
  --color-primary-light: #0056b3;
  --color-link: #0066cc;
  
  /* Text Colors */
  --color-text: #222;
  --color-text-dark: #111;
  --color-text-light: #666;
  --color-text-inverse: white;
  
  /* Feedback Colors */
  --color-success-bg: #e6f7e6;
  --color-error-bg: #f7e6e6;
  
  /* Utility Colors */
  --color-white: white;
  --color-light-gray: #f5f5f5;
  --color-transparent: transparent;
  
  /* Semi-transparent Colors */
  --color-primary-10: rgba(8, 52, 86, 0.1);
  --color-primary-95: rgba(8, 52, 86, 0.95);
  --color-black-05: rgba(0, 0, 0, 0.05);
  --color-black-10: rgba(0, 0, 0, 0.1);
  --color-background-90: rgba(245, 235, 223, 0.9);
}

/* Accessibility - Skip to content */
.skip-to-content {
  position: absolute;
  top: -9999px;
  left: -9999px;
  background-color: var(--color-primary-light);
  color: var(--color-text-inverse);
  padding: 8px;
  z-index: 100;
  transition: all 0.3s;
}

.skip-to-content:focus {
  top: 0;
  left: 0;
}

/* Global box-sizing for all elements - Updated 2025-05-28 */
* {
  box-sizing: border-box;
}

/* Sivuston rakenne */
body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-background);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

/* Sisältöalue */
.content-wrapper {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.5rem;
}

/* Otsikot */
h1, h2, h3 {
  margin-top: 2rem;
  line-height: 1.2;
  color: var(--color-text-dark);
}
h1 {
  font-size: 2rem;
}
h2 {
  font-size: 1.5rem;
}
h3 {
  font-size: 1.2rem;
}

/* Kappaleet ja linkit */
p {
  margin-bottom: 1rem;
  font-size: 1rem;
}
a {
  color: var(--color-primary-light);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Kuvien skaalaus */
img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 2rem auto;
}

/* Listat */
ul {
  padding-left: 1.2rem;
  margin-bottom: 1rem;
}

/* Responsiivinen fonttikoko mobiiliin */
@media (max-width: 600px) {
  .content-wrapper {
    font-size: 1rem;
    padding: 1rem;
  }
  h1 {
    font-size: 1.5rem;
  }
  h2 {
    font-size: 1.25rem;
  }

  .site-header {
    padding: 1rem 0; /* Increase vertical padding on mobile */
  }

  /* Mobile adjustments for subpage header logo */
  .subpage-header .logo-link {
    top: 10px; /* Nudge logo down slightly */
    left: 5px; /* Adjust horizontal position slightly */
    z-index: 1100;
  }

  .subpage-header .logo-link .site-logo {
    /* height: 60px; */ /* Commenting out the previous fixed height */
    height: 15vw;     /* Size height relative to viewport width */
    max-height: 60px; /* Set a maximum pixel height */
  }

  .hero-image {
    width: 90%;
    height: auto;
    margin-top: 1rem;
  }

  .profile-container #profile-pic {
    float: none;
    width: 150px;
    height: 150px;
    margin: 0 auto 1rem auto;
  }
}

/* 404 Error Page Styles */
.error-container {
  text-align: center;
  padding: 2rem 1rem;
  max-width: 800px;
  margin: 0 auto;
}

.error-container h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--color-primary);
}

.error-container p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.error-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.error-button {
  display: inline-block;
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  padding: 0.8rem 1.5rem;
  border-radius: 4px;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.error-button:hover {
  background-color: var(--color-primary-dark);
  text-decoration: none;
}

.error-button.secondary {
  background-color: var(--color-transparent);
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.error-button.secondary:hover {
  background-color: var(--color-primary-10);
}

.error-suggestions {
  text-align: left;
  background-color: var(--color-light-gray);
  padding: 1.5rem;
  border-radius: 8px;
}

.error-suggestions h2 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: #333;
}

.error-suggestions ul {
  list-style-type: disc;
  padding-left: 1.5rem;
}

.error-suggestions li {
  margin-bottom: 0.5rem;
}

.error-suggestions a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.error-suggestions a:hover {
  text-decoration: underline;
}

/* CTA Component Styles */
.cta-container {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  padding: 2rem;
  border-radius: 8px;
  margin: 2rem 0;
  text-align: center;
}

.cta-heading {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--color-text-inverse);
}

.cta-text {
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
}

.cta-button {
  display: inline-block;
  background-color: white;
  color: var(--color-primary);
  padding: 0.8rem 1.5rem;
  border-radius: 4px;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.cta-button:hover {
  background-color: white;
  text-decoration: none;
}

/* Contact Form Styles */
.contact-form-container {
  max-width: 600px;
  margin: 2rem auto;
}

/* Hide honeypot field for spam protection */
.hidden {
  display: none;
  position: absolute;
  left: -9999px;
  opacity: 0;
  visibility: hidden;
}

.contact-form .form-group {
  margin-bottom: 1.5rem;
}

.contact-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: inherit;
  font-size: 1rem;
}

/* Responsive form fields for mobile */
@media (max-width: 600px) {
  .contact-form-container {
    width: 90%;
    margin: 0 auto;
  }

  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    width: 90%;
    max-width: 100%;
  }
}

.contact-form textarea {
  resize: vertical;
}

.contact-form .checkbox-group {
  display: flex;
  align-items: flex-start;
}

.contact-form .checkbox-group input {
  width: auto;
  margin-right: 10px;
  margin-top: 5px;
}

.contact-form .checkbox-group label {
  margin-bottom: 0;
}

.contact-form .submit-button {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.contact-form .submit-button:hover {
  background-color: var(--color-primary-dark);
}

.form-success {
  background-color: var(--color-success-bg);
  border-left: 4px solid #2e8b57;
  padding: 1.5rem;
  border-radius: 4px;
}

.form-error {
  background-color: var(--color-error-bg);
  border-left: 4px solid #b22222;
  padding: 1.5rem;
  margin: 1.5rem 0;
  border-radius: 4px;
}

.privacy-notice .small-text {
  font-size: 0.85rem;
  color: var(--color-text-light);
  margin-top: 0.5rem;
}

/* Cookie Consent Banner */
.cookie-consent {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--color-primary-95);
  color: var(--color-text-inverse);
  z-index: 1000;
  padding: 1rem;
  box-shadow: 0 -2px 10px var(--color-black-10);
}

.cookie-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.cookie-content p {
  margin: 0 1rem 0 0;
  flex: 1;
}

.cookie-content a {
  color: var(--color-background);
  text-decoration: underline;
}

.cookie-buttons {
  display: flex;
  gap: 0.5rem;
}

.cookie-button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.cookie-button.accept {
  background-color: white;
  color: var(--color-primary);
}

.cookie-button.reject {
  background-color: var(--color-transparent);
  color: var(--color-background);
  border: 1px solid var(--color-background);
}

.cookie-button:hover {
  opacity: 0.9;
}

@media (max-width: 768px) {
  .cookie-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .cookie-content p {
    margin-bottom: 1rem;
  }

  .cookie-buttons {
    width: 100%;
    justify-content: space-between;
  }
}

/* Footer-tyylit */
/* Footer styles */
.site-footer {
  margin-top: 2rem;
  padding: 1.5rem 0;
  background-color: var(--color-background); /* Match body background */
  border-top: 1px solid var(--color-black-10); /* Subtle separator */
  font-size: 0.9rem;
  color: var(--color-text-light);
}

.site-footer .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  text-align: center;
}

.footer-nav {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.footer-nav a {
  color: var(--color-link);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.3s ease;
  padding: 0.5rem;
}

.footer-nav a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Mobile footer adjustments */
@media (max-width: 600px) {
  .site-footer {
    padding: 2rem 0;
  }

  .footer-nav {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .footer-nav a {
    display: block;
    padding: 0.75rem;
    width: 80%;
    margin: 0 auto;
    border-radius: 4px;
    background-color: var(--color-black-05);
  }

  .footer-nav a:active {
    background-color: var(--color-black-10);
  }
}

/* Header Styles */
.site-header {
  background-color: var(--color-background);
  padding: 0.5rem 0;
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: hidden;
}

/* Desktop-only sticky header */
@media (min-width: 601px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 1000; /* Ensure header appears above other content */
  }
}

.header-container {
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
}

.header-container {
  justify-content: center;
  max-width: 100%;
  margin: 0 auto;
  padding: 1.5rem 0;
  width: 100%;
}

/* Corner logo styling for subpages - Updated 2025-05-28 */
.corner-logo-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  z-index: 1010;
}

.corner-logo-link {
  position: absolute;
  top: 15px;
  left: 15px;
  display: block;
}

.corner-logo {
  height: auto;
  width: 180px; /* Adjust width as needed while maintaining proportions */
  display: block;
  margin: 0;
}

/* Mobile adjustments for corner logo - Updated 2025-05-28 */
@media (max-width: 600px) {
  .corner-logo {
    width: 140px; /* Smaller on mobile */
  }
}

.main-nav ul {
  list-style: none; /* Remove bullet points */
  margin: 0;
  padding: 0;
  display: flex; /* Make list items horizontal */
}

/* Centered navigation for all pages - Updated 2025-05-28 */
.main-nav {
  display: flex;
  justify-content: center;
}

.main-nav ul {
  justify-content: center; /* Center the navigation items */
}

.main-nav li {
  margin: 0 1rem; /* Even spacing on both sides */
}

.main-nav a {
  color: var(--color-primary); /* Updated color */
  text-decoration: none;
  font-weight: 500; /* Slightly bolder */
  font-size: 1.2rem; /* Increased font size slightly more */
}

/* Active navigation link styling */
.main-nav a.active {
  position: relative;
  font-weight: 700; /* Bolder than regular links */
}

/* Underline indicator for active navigation items */
.main-nav a.active::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--color-primary);
  border-radius: 1.5px;
}

/* Contact link styling */
.main-nav a.contact-link {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.main-nav a.contact-link:hover {
  background-color: var(--color-primary-dark);
  text-decoration: none;
}

/* Small caps style for navigation */
.main-nav a {
  font-variant: small-caps; /* Added small-caps style */
}

.main-nav a:hover {
  text-decoration: underline;
}

/* Prevent double underline on active items when hovering */
.main-nav a.active:hover {
  text-decoration: none;
}

/* Mobile-specific active state styling */
@media (max-width: 600px) {
  /* Active state for mobile navigation */
  .main-nav a.active {
    background-color: var(--color-primary-10);
    border-radius: 4px;
  }
  
  /* Remove the underline indicator on mobile */
  .main-nav a.active::after {
    display: none;
  }
}

/* Adjust content padding for sticky header */
body.subpage .content-wrapper {
  padding-top: 2rem; /* Reduced padding since header is now sticky instead of absolute */
}

/* When there's a hero image, we don't need as much top padding */
body.subpage .hero-image + h1 {
  margin-top: 2rem; /* Standard margin for h1 after hero image */
}

/* When there's no hero image, add more space to the first h1 - Updated 2025-05-28 */
body.subpage main h1:first-child {
  margin-top: 2.5rem; /* Increased margin for better spacing */
}

/* Additional spacing for mobile view without hero images */
@media (max-width: 600px) {
  body.subpage main h1:first-child {
    margin-top: 4rem; /* Extra spacing on mobile */
    padding-top: 1rem;
  }
}

/* Hero Image Styling */
.hero-image {
  height: 400px; /* Match front page logo height */
  width: 400px; /* Match front page logo width */
  display: block; /* Ensure block behavior */
  margin-bottom: 1.5rem; /* Add space below image */
  margin-left: auto; /* Center image */
  margin-right: auto; /* Center image */
}

/* Blog List Styling */
ul.blog-list {
  list-style: none; /* Remove default bullets */
  padding-left: 0; /* Remove default padding */
}

.blog-list li {
  margin-bottom: 2rem; /* Add space below each blog post entry */
}

.blog-list li a {
  font-weight: bold; /* Make title bold */
  font-size: 1.2rem; /* Slightly larger title */
  display: block; /* Make title a block element */
  margin-bottom: 0.25rem; /* Small space below title */
}

.blog-list li .date {
  display: block; /* Put date on its own line */
  font-size: 0.9rem; /* Slightly smaller date font */
  color: #555; /* Grey color for date */
  margin-bottom: 0.5rem; /* Space below date */
}

.blog-list li p {
  margin-top: 0; /* Remove default top margin from paragraph */
  margin-bottom: 0; /* Remove default bottom margin if needed */
}

/* Reduce space between paragraph heading and list */
p + ul {
  margin-top: 0;
}

/* Profile Picture Specific Styling */
#profile-pic {
  width: 200px;
  height: 200px;
  object-fit: cover; /* Crop image to fit dimensions without distortion */
  border-radius: 50%;
  float: right;
  margin: 0 0 0.5rem 1.5rem; /* top right bottom left */
}

/* Container for profile section to contain float */
.profile-container {
  overflow: auto; /* Contain the float */
  margin-top: 1.5rem; /* Space below the h2 */
}

/* Profile Section - Side-by-Side Layout */

/* Commenting out Flexbox rules
.profile-container {
  display: flex;
  flex-direction: row-reverse; Put image on the right
  align-items: flex-start; Align items to the top
  gap: 1.5rem; Space between image and text
  margin-top: 1.5rem; Space below the h2
}
*/


/* Adjust profile pic within the container */
/* Commenting out Flexbox adjustment
.profile-container #profile-pic {
  margin: 0; Override default auto margins
  flex-shrink: 0; Prevent image from shrinking if container is narrow
}
*/

/* Adjust paragraphs within the container */
/* Keeping this rule for now
.profile-container div p {
  margin-top: 0; Remove top margin from first paragraph
}

.profile-container div p:not(:first-child) {
   Keep default bottom margin or adjust if needed
   margin-bottom: 1rem;
}
*/

/* Horizontal Rule Styling */
hr {
  border: none;
  border-top: 1px solid #ddd; /* Light grey line */
  margin: 2rem 0; /* Add vertical spacing */
}

/* Mobile menu toggle */
#menu-toggle {
  display: none; /* Hidden by default on desktop */
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--color-primary);
  transition: all 0.3s ease;
  margin-right: 1rem;
}

/* Full-screen mobile menu */
@media (max-width: 600px) {
  /* Header container adjustments for mobile - Updated 2025-05-28 */
  .site-header {
    padding: 0.5rem 1rem;
  }

  .header-container {
    padding: 0.5rem 0;
  }

  /* Horizontal logo adjustments for mobile */
  .horizontal-logo {
    width: 140px; /* Smaller on mobile */
  }

  /* Toggle button styling - Updated 2025-05-28 */
  #menu-toggle {
    display: block;
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1020; /* Higher z-index to ensure visibility */
    background-color: var(--color-background-90); /* Semi-transparent background */
    padding: 0.5rem;
    border-radius: 4px;
  }

  /* When menu is open, fix toggle position */
  #menu-toggle.menu-open {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1002; /* Higher than the menu */
  }

  /* Main navigation container */
  .main-nav {
    width: 100%;
  }

  /* Menu list styling */
  .main-nav ul {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--color-background);
    z-index: 1000;
    margin: 0;
    padding: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  /* Active menu state */
  #main-menu.open {
    display: flex !important;
  }

  /* List item styling */
  .main-nav li {
    margin: 0;
    padding: 1rem 0;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* Link styling */
  .main-nav a {
    display: inline-block;
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    text-align: center;
    width: auto;
    margin: 0 auto;
  }

  /* Prevent body scrolling when menu is open */
  body.menu-open {
    overflow: hidden;
  }

  /* Make the toggle button float on top of the menu */
  .header-container {
    position: relative;
  }
}