/*
 * OJS 3.5 – Custom Footer Styles (brand: #12641c, #e0a800)
 * - Hides PKP branding block
 * - Styles the Page Footer content area (your custom HTML)
 * - Provides a responsive 3-column grid
 *
 * Targets Default Theme classes:
 *   .pkp_brand_footer, .pkp_footer_content, .pkp_structure_footer_wrapper
 */

/* ===== Brand tokens ===== */
:root {
  --footer-bg: #ffffff;               /* deep brand green background */
  --footer-text: #000000;             /* near-white for strong contrast */
  --footer-link: #e0a800;             /* brand amber accent for links */
  --footer-link-hover: #ffd451;       /* lighter amber hover for clarity */
  --footer-border: rgba(255,255,255,.18); /* subtle top separator */
  --footer-max-width: 1200px;         /* content max width */
  --footer-padding-y: 2rem;           /* vertical padding */
  --footer-padding-x: 1rem;           /* horizontal padding */
  --footer-column-gap: 2rem;          /* column gap */
  --footer-heading: #ffffff;          /* headings */
  --footer-muted: #e9f2ea;            /* muted/small text */
}

/* 1) Hide “Powered by PKP/OJS” brand block */
.pkp_brand_footer {
  display: none !important;
}

/* 2) Footer wrapper background & top border */
.pkp_structure_footer_wrapper {
  background: var(--footer-bg) !important;
  border-top: 1px solid var(--footer-border);
}

/* 3) Ensure left alignment for structure container */
.pkp_structure_footer {
  text-align: left !important;
}

/* 4) Style the Page Footer content (your custom HTML lives here) */
.pkp_footer_content {
  color: var(--footer-text);
  padding: var(--footer-padding-y) var(--footer-padding-x) !important;
  margin: 0 auto;
  max-width: var(--footer-max-width);
  line-height: 1.6;
  font-size: 0.95rem;
}

/* Links */
.pkp_footer_content a {
  color: var(--footer-link);
  text-decoration: none;
  border-bottom: 1px dotted var(--footer-link);
}
.pkp_footer_content a:hover,
.pkp_footer_content a:focus {
  color: var(--footer-link-hover);
  border-bottom-color: var(--footer-link-hover);
}

/* Headings inside footer */
.pkp_footer_content h1,
.pkp_footer_content h2,
.pkp_footer_content h3,
.pkp_footer_content h4 {
  color: var(--footer-heading);
  margin: 0 0 .5rem;
  font-size: 1.05rem;
}

/* Small/muted text */
.pkp_footer_content .muted,
.pkp_footer_content small {
  color: var(--footer-muted);
}

/* ===== 3-column responsive grid =====
   Use .footer-grid-3 in your Page Footer HTML */
.pkp_footer_content .footer-grid-3 {
  display: grid;
  grid-template-columns: 1fr;         /* 1 column on mobile */
  gap: var(--footer-column-gap);
}

@media (min-width: 768px) {
  .pkp_footer_content .footer-grid-3 {
    grid-template-columns: 1fr 1fr;   /* 2 columns on tablets */
  }
}

@media (min-width: 992px) {
  .pkp_footer_content .footer-grid-3 {
    grid-template-columns: 1fr 1fr 1fr; /* 3 columns on desktop */
  }
}

/* Optional subtle separators for lists/sections */
.pkp_footer_content .footer-sep {
  border: 0;
  height: 1px;
  background: var(--footer-border);
  margin: 1rem 0;
}

/* Utility alignment & spacing (use in your HTML) */
.pkp_footer_content .text-center { text-align: center; }
.pkp_footer_content .text-right  { text-align: right; }
.pkp_footer_content .text-left   { text-align: left; }

.pkp_footer_content .mt-0 { margin-top: 0 !important; }
.pkp_footer_content .mt-1 { margin-top: .25rem !important; }
.pkp_footer_content .mt-2 { margin-top: .5rem !important; }
.pkp_footer_content .mt-3 { margin-top: 1rem !important; }
.pkp_footer_content .mt-4 { margin-top: 1.5rem !important; }
.pkp_footer_content .mb-0 { margin-bottom: 0 !important; }
.pkp_footer_content .mb-1 { margin-bottom: .25rem !important; }
.pkp_footer_content .mb-2 { margin-bottom: .5rem !important; }
.pkp_footer_content .mb-3 { margin-bottom: 1rem !important; }
.pkp_footer_content .mb-4 { margin-bottom: 1.5rem !important; }

/* Logo helper */
.pkp_footer_content .footer-logo {
  max-height: 56px;
  width: auto;
  height: auto;
  display: block;
}

/* Image safety */
.pkp_footer_content img { max-width: 100%; height: auto; }

/* High-contrast focus outlines for accessibility */
.pkp_footer_content a:focus,
.pkp_footer_content button:focus,
.pkp_footer_content input:focus {
  outline: 2px solid var(--footer-link);
  outline-offset: 2px;
}