/* ==========================================================================
   Custom Footer Menu Styles for Journal
   ========================================================================== */

.custom_footer_menu {
  display: flex; /* Enables Flexbox layout for the footer sections */
  justify-content: center; /* Centers the group of columns if they don't fill the entire width */
  align-items: flex-start; /* Aligns columns to the top */
  flex-wrap: wrap; /* Allows columns to wrap to the next line on smaller screens if needed */
  gap: 30px; /* Space between the columns (e.g., 20px, 2em) */
  padding: 30px 15px; /* Padding above/below and on the sides of the footer content area */
  max-width: 1200px; /* Sets a maximum width for the footer content */
  margin-left: auto; /* Centers the footer content block on the page */
  margin-right: auto; /* Centers the footer content block on the page */
  border-top: 1px solid #e0e0e0; /* Optional: Adds a light line above the footer */
  text-align: left; /* Default text alignment for content within columns */
}

.footer_menu_col {
  flex: 1; /* Allows columns to grow and shrink equally */
  min-width: 220px; /* Minimum width for each column before wrapping (adjust as needed) */
  /* If you prefer the text within each column to be centered, uncomment the line below */
  /* text-align: center; */
}

.footer_menu_col h2 {
  font-size: 1.2em; /* Adjust heading size as needed */
  margin-top: 0; /* Removes default top margin from heading */
  margin-bottom: 15px; /* Space below the heading */
  color: #333; /* Heading color */
  /* If column text is left-aligned but you want headings centered, uncomment below */
  /* text-align: center; */
}

.footer_menu_col ul {
  list-style-type: none; /* Removes default bullet points from lists */
  padding-left: 0; /* Removes default left padding from lists */
  margin: 0; /* Removes default margins from lists */
}

.footer_menu_col ul li {
  margin-bottom: 10px; /* Space between list items */
}

.footer_menu_col ul li a {
  text-decoration: none; /* Removes underline from links */
  color: #555; /* Link color */
  transition: color 0.3s ease; /* Smooth transition for hover effect */
}

.footer_menu_col ul li a:hover,
.footer_menu_col ul li a:focus {
  color: #007bff; /* Link color on hover/focus - adjust to your theme */
  text-decoration: underline; /* Adds underline on hover/focus for better visibility */
}

/* ==========================================================================
   Styles for the content below the three columns (logos, copyright)
   ========================================================================== */

/* Styles for the div containing logos - ensuring it's centered */
.footer-logos-container { /* You'll need to wrap your logo div with this class */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px; /* Space between logos */
  padding: 20px 15px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.footer-logos-container img {
  max-height: 40px; /* Adjust max height of logos as needed */
  width: auto; /* Maintain aspect ratio */
  vertical-align: middle; /* Good practice for inline-block elements like images */
}

/* Styles for the centered text block (copyright, license) */
.footer-credits { /* You'll need to wrap your credits div with this class */
  text-align: center;
  padding: 20px 15px;
  font-size: 0.9em;
  color: #666;
  line-height: 1.6;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.footer-credits img { /* For the Creative Commons icon */
  margin-top: 10px;
  display: inline-block; /* Or block with margin auto if you want it on its own centered line */
  height: 30px; /* Adjust as needed */
  width: auto;
}


/* ==========================================================================
   Responsive Adjustments for Smaller Screens
   ========================================================================== */

@media (max-width: 768px) { /* Adjust breakpoint as needed (e.g., for tablets and phones) */
  .custom_footer_menu {
    flex-direction: column; /* Stacks the columns vertically */
    align-items: center; /* Centers the stacked columns */
    text-align: center; /* Center-align text within stacked columns */
  }

  .footer_menu_col {
    width: 100%; /* Makes each column take up most of the available width */
    max-width: 350px; /* Optional: Constrain width of stacked columns */
    min-width: unset; /* Resets min-width for stacked layout */
    margin-bottom: 20px; /* Adds space between stacked columns */
  }

  .footer_menu_col:last-child {
    margin-bottom: 0;
  }

  .footer_menu_col h2 {
    text-align: center; /* Ensure headings are centered in stacked view */
  }
}

@media (max-width: 480px) { /* Further adjustments for very small screens if needed */
  .custom_footer_menu {
    padding: 20px 10px;
  }

  .footer_menu_col h2 {
    font-size: 1.1em;
  }

  .footer-logos-container {
    gap: 15px;
  }

  .footer-logos-container img {
    max-height: 30px;
  }
}

/* ==========================================================================
   Footer fixes: 3 columns, centered credits, hide OJS/PKP logo
   ========================================================================== */

/* 1) Force three columns on desktop and above */
@media (min-width: 992px) {
  .custom_footer_menu {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
  }
  .custom_footer_menu .footer_menu_col {
    /* exactly 3 columns; gap is handled by flex gap */
    flex: 0 0 calc(33.333% - 20px);
    min-width: 0; /* prevent wrapping due to long words */
  }
}

/* 2) Center the credits text and keep CC logo readable */
.footer-credits p {
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}

.footer-credits img {
  height: 40px; /* adjust if you want larger/smaller */
  width: auto;
  display: inline-block;
}

/* 3) Hide the OJS/PKP branding footer (multiple selectors for safety) */
.pkp_brand_footer,
.pkp_brand_footer a,
.pkp_brand_footer img,
.pkp_structure_footer .pkp_brand_footer,
.pkp_brand_footer .pkp_brand_footer_version,
.pkp_brand_footer .pkp_brand_footer_image {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}