/* ============================================================
   KPF – Kieler Pilzfreunde
   Custom styles loaded after style/tailwind.css.
   WCAG 2.1 AA compliant, mobile-first responsive.
   ============================================================ */

/* ------------------------------------------------------------
   BASE
   ------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

/* Links – must meet 4.5:1 contrast on white (WCAG 1.4.3).
   #166534 (green-800) gives ~7.1:1 on white. */
/* Arrow prefix (see below) satisfies WCAG 1.4.1 without underline */
a {
  color: #166534;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #14532d;
  text-decoration: none;
}

/* Red arrow span injected by JS before non-nav links */
.link-arrow {
  color: #dc2626;
}

/* Header band */
header {
  background-color: #f0fdf4;
}

/* Header title link – always dark green, no underline */
header a {
  color: #14532d;
  text-decoration: none;
}
header a:visited {
  color: #14532d;
}
header a:hover {
  color: #15803d;
}

/* Global focus indicator – WCAG 2.4.7 / 2.4.11 */
:focus-visible {
  outline: 3px solid #16a34a;
  outline-offset: 3px;
  border-radius: 3px;
}

/* Suppress outline for mouse clicks, keep it for keyboard */
:focus:not(:focus-visible) {
  outline: none;
}

/* Respect reduced-motion preference – WCAG 2.3.3 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------
   PAGE SHELL  (mobile-first)
   ------------------------------------------------------------ */

#imPage {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #ffffff;
}

/* Stack nav above content on mobile */
.site-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Desktop: side-by-side layout */
@media (min-width: 768px) {
  #imPage {
    max-width: 64rem;   /* ~1024px, same as Tailwind max-w-5xl */
    margin: 1.5rem auto;
    border-radius: 0.75rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    min-height: calc(100vh - 3rem);
    overflow: hidden;
  }

  .site-body {
    flex-direction: row;
  }
}

/* ------------------------------------------------------------
   HEADER
   ------------------------------------------------------------ */

/* The header itself is styled with Tailwind classes in header.php.
   Extra rules for the tagline colour (must meet 3:1 on green-900).
   #86efac (green-300) on #14532d (green-900): ~6.6:1 ✓            */

/* ------------------------------------------------------------
   SIDEBAR NAVIGATION
   ------------------------------------------------------------ */

/* Hidden on mobile until hamburger opens it */
#imMnMn {
  display: none;
  width: 100%;
  background-color: #f0fdf4;
  border-bottom: 1px solid #bbf7d0;
}

#imMnMn.nav-open {
  display: block;
}

/* Always visible on desktop, fixed width */
@media (min-width: 768px) {
  #imMnMn {
    display: block;
    width: 200px;
    flex-shrink: 0;
    border-bottom: none;
    border-right: 1px solid #d1fae5;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}

/* Nav links – #166534 on #f0fdf4: ~6.9:1 ✓ */
#imMnMn a {
  display: block;
  padding: 0.5rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #166534;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background-color 0.15s, border-color 0.15s;
}

#imMnMn a:hover,
#imMnMn a:focus {
  background-color: #dcfce7;
  border-left-color: #16a34a;
  color: #14532d;
  text-decoration: none;
}

#imMnMn a[aria-current="page"] {
  background-color: #dcfce7;
  border-left-color: #15803d;
  color: #14532d;
  font-weight: 700;
}

/* ------------------------------------------------------------
   MAIN CONTENT AREA
   ------------------------------------------------------------ */

#imContent {
  flex: 1;
  min-width: 0;
  padding: 1rem;
}

@media (min-width: 768px) {
  #imContent {
    padding: 1.5rem 2rem;
  }
}

/* ------------------------------------------------------------
   CONTENT COMPONENTS  (class names used in page content files)
   ------------------------------------------------------------ */

/* .mainHeadline – #14532d on white: ~8.9:1 ✓ */
.mainHeadline {
  width: 100%;
  float: none;
  font-size: 1.1rem;
  font-weight: 700;
  color: #14532d;
  border-bottom: 2px solid #14532d;
  padding: 0 0 0.25rem;
  margin: 0 0 0.75rem;
}

@media (min-width: 768px) {
  .mainHeadline {
    font-size: 1.15rem;
    margin: 0 0 0.75rem;
  }
}

.mainContent {
  width: auto;
  float: none;
  font-size: 1rem;
  margin-bottom: 1.25rem;
  line-height: 1.75;
}

.mainContent > p {
  margin-top: 0.6em;
}

.mainContent > ul {
  list-style: circle;
  margin-left: 1.5em;
  margin-top: 0.75em;
}

.mainContent > ul.list {
  list-style: disc;
  margin-left: 1.75em;
  margin-top: 0.75em;
}

/* .box border-colour (#ef4444) is decorative; text inside inherits body colour */
.mainContent .box {
  border: 2px solid #ef4444;
  background-color: #fef2f2;
  padding: 0.75rem 1rem;
  text-align: center;
  border-radius: 6px;
  margin-top: 0.75em;
}

.mainContent .boxGrey {
  border: 2px solid #9ca3af;
  background-color: #f9fafb;
  padding: 0.75rem 1rem;
  text-align: center;
  border-radius: 6px;
  margin-top: 0.75em;
}

.mainContent h2,
.mainContent .subHeadline {
  font-size: 1.05rem;
  font-weight: 700;
  color: #14532d;
  margin-top: 1.25em;
  margin-bottom: 0.4em;
}

.mainContent .subHeadline {
  border-bottom: 1px solid #d1d5db;
  padding-bottom: 0.2rem;
}

.mainContent > video {
  margin-top: 0.75rem;
  width: 100%;
  max-width: 36em;
  border-radius: 6px;
}

/* Links inside content */
.mainContent a {
  color: #166534;
}

.mainContent a:hover {
  color: #14532d;
}

/* ------------------------------------------------------------
   TABLES  (responsive: horizontal scroll on small screens)
   ------------------------------------------------------------ */

/* Collapse multi-column rows into a single stacked block per row on mobile */
@media (max-width: 767px) {
  .stdTable,
  .stdTable tbody,
  .stdTable tr,
  .stdTable td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  .stdTable tr {
    margin-bottom: 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
  }
  .stdTable td {
    border-bottom: 1px solid #e5e7eb;
    text-align: left !important;
    white-space: normal !important;
  }
  .stdTable td:last-child {
    border-bottom: none;
  }
  .trOdd td,
  .trEven td {
    background-color: transparent;
  }
  .trOdd {
    background-color: #f9fafb;
  }
  .trEven {
    background-color: #ffffff;
  }
}

.stdTable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
  font-size: 0.95rem;
  border: 1px solid #e5e7eb;
}

.stdTable td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
}

.stdTable tr:last-child td {
  border-bottom: none;
}


.trOdd td {
  background-color: #f9fafb;
}

.trEven td {
  background-color: #ffffff;
}

/* .tdRight – #374151 on #f9fafb: ~9.9:1 ✓ */
.tdRight {
  text-align: right;
  font-weight: 500;
  white-space: nowrap;
  color: #374151;
}

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */

/* Footer and nav links styled via Tailwind classes in footer.php.
   Colour check: #86efac (green-300) on #14532d (green-900): ~6.6:1 ✓ */

#imBtMn {
  line-height: 1.8;
}

#imBtMn a {
  color: #14532d;
  text-decoration: none;
  margin: 0 0.1rem;
}

#imBtMn a:hover,
#imBtMn a:focus {
  color: #15803d;
  text-decoration: underline;
}

/* ------------------------------------------------------------
   UTILITY CLASSES
   ------------------------------------------------------------ */

.imHidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.imClear {
  clear: both;
  visibility: hidden;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.imNoScript div {
  background-color: #fef2f2;
  border: 1px solid #ef4444;
  border-radius: 6px;
  margin: 1rem;
  padding: 0.75rem 1rem;
  color: #991b1b;
  text-align: center;
  font-size: 0.9rem;
}

/* Older font-size helpers used in some page fragments */
.fs24 { font-size: 1.15rem; }
.fs20 { font-size: 1rem; }

/* ------------------------------------------------------------
   FORM ELEMENTS  (kontakt.php)
   ------------------------------------------------------------ */

input[type=text],
input[type=email],
input[type=password],
textarea,
select {
  font: inherit;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  background-color: #fff;
  color: #111827;
  max-width: 100%;
  box-sizing: border-box;
}

input[type=text]:focus,
input[type=email]:focus,
textarea:focus {
  outline: none;
  border-color: #16a34a;
  box-shadow: 0 0 0 3px #bbf7d0;
}

input[type=submit],
input[type=button],
input[type=reset] {
  font: inherit;
  background-color: #166534;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1.25rem;
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
}

input[type=submit]:hover,
input[type=button]:hover,
input[type=submit]:focus,
input[type=button]:focus {
  background-color: #14532d;
}

textarea {
  resize: vertical;
}

/* ------------------------------------------------------------
   PHOTO GALLERY GRID  (fotos-album-*.php)
   ------------------------------------------------------------ */

.photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.photo-item {
  margin: 0;
}

.photo-item img {
  display: block;
  width: 187px;
  height: 187px;
  object-fit: cover;
  border-radius: 4px;
}

.photo-item figcaption {
  font-size: 0.75rem;
  color: #374151;
  margin-top: 0.25rem;
  line-height: 1.4;
  max-width: 187px;
}

/* Album overview cards */
.album-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1rem;
}

.album-card {
  width: 187px;
  text-decoration: none;
  color: inherit;
}

.album-card img {
  display: block;
  width: 187px;
  height: 187px;
  object-fit: cover;
  border-radius: 4px;
  border: 2px solid #d1fae5;
  transition: border-color 0.15s;
}

.album-card:hover img,
.album-card:focus img {
  border-color: #16a34a;
}

.album-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #14532d;
  margin-top: 0.4rem;
}

.album-card-count {
  font-size: 0.8rem;
  color: #6b7280;
}

/* ------------------------------------------------------------
   PRINT
   ------------------------------------------------------------ */

@media print {
  body {
    background-color: #fff;
  }

  #imMnMn,
  #nav-toggle {
    display: none !important;
  }

  #imPage {
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    max-width: none;
  }

  .site-body {
    display: block;
  }

  #imContent {
    padding: 0;
  }
}