/* style.css */

@import url('https://fonts.cdnfonts.com/css/finlandica');
@import url('https://fonts.cdnfonts.com/css/rogan');

body {
    font-size: clamp(1rem, 2.5vw, 3ex); /* Responsive font size */
    line-height: 1.6;
    font-family: 'Finlandica', sans-serif;
    background-color: #faf9f2;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; /* Stack children vertically */
    justify-content: flex-start; /* Start items at the top */
    align-items: center; /* Center main content horizontally */
    height: 100vh;
}

/* Full-width Header */
header {
    background-color: #faf9f2;
    color: black;
    padding: 10px 0;
    border-bottom: 2px solid #4b4b4b;
    box-sizing: border-box; /* Includes padding and border in width */
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    flex-shrink: 0; /* Prevent shrinking in a flex context */
}

.header-logo img {
    max-width: 150px; /* Adjust the logo size */
    margin-left: 40px;
    height: auto;
}

.header-logo a{

}

.header-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.header-nav li {
    margin: 0 15px; /* Adjust space between links */
}

.header-nav a {
    color: rgb(40, 39, 39);
    text-decoration: none;
    font-size: 1.2em;
}

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

/* Ensure the main content starts below the header */
main {
    padding-top: 40px; /* Adjust according to the header height */
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease
}

a:hover {
  color: #8c01ae;
}

.article-container {
    width: 60%; /* Adjust the width as needed, like 80% of the page */
    margin: 0 auto; /* Center the container */
    padding: 20px; /* Optional: Add some space inside the container */
}

.article-container a {
  color: #8c01ae; 
  text-decoration: none; /* Remove the underline */
  background: none; /* Remove any background */
  transition: color 0.3s ease;
  
}

/* Optional: Add hover effect to all links */
.article-container a:hover {
  text-decoration: none; 
  color: #9356a2;
}

figure {
    text-align: center; /* Centers the figure and caption */
    margin: 40px 0 ; /* Adds space above and below the figure */
}

figure img {
    max-width: 100%; /* Makes sure the image doesn't exceed the container's width */
    height: auto; /* Keeps the image aspect ratio intact */
}

figcaption {
    text-align: left;
    font-size: 0.9em; /* Reduces the font size for the caption */
    color: #555; /* Optional: Changes the caption text color */
    margin: 0; /* Adds space between the image and caption */
    margin-bottom: 40px;
    line-height: 1.2;
}

ul {
    list-style-type: none;
    padding: 0;
}

.publisher-info {
    font-size: 0.9em;
    font-style: italic;
    color: #000000;
    margin-bottom: 5px;
}

.intro-paragraph {
    font-weight: bold;
    font-size: 1.0em;
    color: #605060;
    margin-bottom: 20px;
}

.references {
    font-size: 0.8em;
    color: black;
    margin-top: 5px;
}

.figure-title {
    font-size: 0.8em;
    font-weight: bold;
    color: #000000;
    margin: 0;
    line-height: 1.2;
}

.figure-legend {
    font-size: 0.8em;
    color: #000000;
    margin: 0;
    line-height: 1.2;
}

.figure-info {
    font-size: 0.8em;
    color: #000000;
    margin: 0;
    line-height: 1.2;
}

article h3 {
    font-size: clamp(1.2em, 2.5vw, 1.4em); /* Responsive font size for h3 */
    color: #000000;
    margin-top: 40px;
    margin-bottom: 10px;
    text-transform: none; /* Keep text in its original case */
}

/* Homepage grid layout section */
.homepage-layout {
    display: grid;
    padding: 10px 40px;
    grid-template-columns: 4fr 1fr; /* New Issue takes 2x the space of Editor's Column */
    gap: 0px; /* Space between the two sections */
}

.homepage-layout h2 {
  text-align: left;
  font-weight: normal;
  margin-bottom: 20px;
  font-size: 2rem;
  color: #453c50;
  border-bottom: 2px solid #453c50;
}

.homepage-layout h3 {
  line-height: 1.2;
  font-weight: 400;
  font-size: 1.5rem;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
  color: #38343c;
  transition: color 0.2s ease;
}

.homepage-layout h3:hover {
  color: #711288
}

/* ========================= homepage on the left  =========================== */
.homeleft-container {
  display: flex;
  flex-direction: column;
  padding-right: 20px;
  gap: 20px;
}

.issues {
}

.issues-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px
}

.issue-card {
    display: flex;
    background-color:#f3f2f6;
    flex-direction: column;
    border: 1px solid #ddd;
    border-radius: 0;
    overflow: hidden;
    text-align: left;
    padding: 0;
}

.issue-card img {
  object-fit: cover;
}

.issue-card h2:hover {
  color: 
}

/* Articles Section */
.articles { 
}

.homeright-container {
  display: flex;
  flex-direction: column;
  padding-left: 20px;
  gap: 20px;
}

/* News section */
.news {
  display: flex;
  flex-direction: column;
}


/* organising cards */
.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px; /* Space between grid items */
}

.article-card {
    display: flex;
    background-color:#f3f2f6;
    flex-direction: column;
    border: 1px solid #ddd;
    border-radius: 0;
    overflow: hidden;
    text-align: left;
    padding: 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-bottom: 1px solid #ddd;
}



.article-card .meta {
    font-size: 0.9rem; /* Slightly smaller font size for meta information */
    color: #555555; /* Neutral color to differentiate from the title */
    margin-left: 10px;
    margin-right: 10px;
    margin-top: auto; /* Adds space above the meta information */
    margin-bottom: 5px;
}

.article-card .author {
    font-weight: bold; /* Makes the author's name stand out */
    text-transform: uppercase;
}

.article-card .category {
    color: #114a53; /* Distinctive color for the category */
    font-weight: normal; /* Keeps the category style balanced */
    text-transform: uppercase;
}

/* Editors Section */
.editors-column {
    display: flex;
    flex-direction: column;
}

/* Button for toggling the nav */
.nav-button {
    position: absolute;
    top: 0px;
    right: 0px;
    background: none;
    color: rgb(0, 0, 0);
    border: none;
    padding: 10px 10px;
    font-size: 1.2em;
    cursor: pointer;
    z-index: 1001;
  }

  /* Button for closing the nav */
  .nav-close-button {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: rgb(247, 245, 202);
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}
  
  /* Side navigation */
  .side-nav {
    position: fixed;
    top: 0;
    right: -300px; /* Hide it off-screen initially */
    height: 100%;
    width: 250px;
    color: rgb(247, 245, 202);
    background-color: #3d1f44;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    transition: right 0.3s ease; /* Smooth slide-in effect */
    z-index: 1000;
  }
  
  /* Navigation list */
  .side-nav ul {
    list-style: none;
    padding: 20px;
    margin: 0;
  }
  
  .side-nav li {
    margin-bottom: 20px;
  }
  
  .side-nav a {
    color: inherit;
    text-decoration: none;
    font-size: 1.2em;
  }
  
  .side-nav a:hover {
    text-decoration: underline;
  }
  
  /* Show the menu when active */
  .side-nav.active {
    right: 0; /* Bring it into view */
  }
  
  /* Footer Container */
  #pamylka-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    background-color: #3d1f44; /* Dark teal or any color you prefer */
    color: rgb(247, 245, 202);              /* White text for contrast */
    padding: 20px 0;
    margin-top: 5vw;
    text-align: center;       /* Default center, can adjust in individual sections */
  }
  
  /* Layout for the 3 sections: links, info, sm */
  #pamylka-footer > div {
    margin: 15px 0;          /* Spacing between sections */
  }
  
  /* ========== Footer Links (Top Row) ========== */
  .footer-links {
    display: flex;           /* Make a horizontal row */
    justify-content: center; /* Center the items horizontally */
    gap: 30px;               /* Space between links (alternative to margin) */
    flex-wrap: wrap;         /* Wrap to new line on small screens if needed */
  }
  
  .footer-links a {
    text-decoration: none;
    color: inherit;
    font-weight: bold;
    transition: color 0.3s ease;
  }
  
  .footer-links a:hover {
    color: #ddd;             /* Subtle color change on hover */
  }
  
  /* ========== Footer Info (Logo, description, CC) ========== */
  .footer-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 700px;
    margin: 0 auto;          /* Center within the footer */
    line-height: 1.4;
    padding: 0 20px;
  }
  
  .footer-info img {
    max-width: 200px;        /* Control the size of the logo and license icons */
    height: auto;
  }
  
  .footer-info p {
    margin: 10px 0;
  }
  
  /* If you want to further style the CC icons */
  .footer-info p a img {
    margin: 0 5px;
  }
  
  /* ========== Social Media (Bottom Icons) ========== */
  .footer-sm {
    display: flex;
    justify-content: center; /* Center the icons horizontally */
    gap: 20px;               /* Space between icons */
  }
  
  .footer-sm img {
    width: 25px;             /* Adjust as needed */
    height: auto;
    transition: transform 0.2s ease;
  }
  
  .footer-sm img:hover {
    transform: scale(1.1);   /* Slight enlargement on hover */
  }
  
  /* ========== Responsive Tweaks ========== */
  /* Example: for smaller screens, you might want to reduce gaps or stack sections */
  @media (max-width: 768px) {
    .footer-links {
      gap: 15px;
    }
  
    .footer-sm {
      gap: 15px;
    }
  
    .footer-info img {
      max-width: 200px;
    }
  }
  

  @media (max-width: 768px) {
    .header {
        max-width: 100vw;
        padding: 0 0;
        margin: 0 0;
    }

    .header-logo img {
        margin: 0vw 5vw;
    }

    .header-nav {
        margin: 0 0;
    }

    .homepage-layout {
        width: 90vw;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    .articles {
        padding: 0 0;
        margin: 0 0;
    }

    .article-card {
        max-width: 90vw;
    }

    .editors-column {
        max-width: 90vw;
        padding: 0 0;
    }

    .article-container {
        width: 90vw; /* Adjust this to control how much space is left on the sides */
    }
}