/* ============================================================
   Hannibál HSE — Global Stylesheet v0.4
   Corrections derived from Wix source code analysis, applied
   2026-06 (see project notes). Green accent and dark footer
   intentionally retained per business owner decision — these
   are deviations from the original neutral/grey Wix palette.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Lora:ital,wght@0,400;0,600;1,400&display=swap');

/* --- CSS Variables --- */
:root {
  --color-bg:         #ffffff;
  --color-text:       rgb(128, 128, 128);   /* corrected: source body text colour */
  --color-text-light: #555555;
  --color-accent:     #1a3a2a;               /* kept by decision — green retained */
  --color-accent-mid: #2e5c3e;               /* kept by decision — green retained */
  --color-border:     rgb(170, 170, 170);    /* corrected: source border colour */
  --color-nav-bg:     rgb(250, 250, 252);    /* corrected: source nav/logo-bar bg */
  --color-nav-text:   rgb(40, 26, 57);       /* corrected: source nav text colour */
  --color-footer-bg:  #1c1c1c;               /* kept by decision — dark footer retained */
  --color-footer-text:#cccccc;

  --font-heading: 'Poppins', sans-serif;     /* corrected: swapped from Raleway */
  --font-body:    'Lora', serif;

  --max-width: 980px;
  --header-aspect-ratio: 980 / 310;
  --nav-height: 45px;                         /* corrected: source nav height */
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); font-size: 1rem; line-height: 1.75; color: var(--color-text); background: var(--color-bg); }
a { color: var(--color-accent-mid); text-decoration: underline; }
a:hover { color: var(--color-accent); }
img { max-width: 100%; height: auto; display: block; }

/* ===== HEADER SLIDESHOW ===== */
.site-header {
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  aspect-ratio: var(--header-aspect-ratio);
  overflow: hidden;
  background: #222;
}

/* Logo bar overlaid on top of the slideshow.
   Corrected: box starts 33px from top, sized ONLY to its text content
   (not the logo). The logo is positioned independently (15px from
   header top) and is taller than the box, so it overflows below the
   box's bottom edge onto the banner image directly — matching the
   source site, where the box is shorter than the logo. */
.header-logo-bar {
  position: absolute;
  top: 33px;
  left: 0;
  width: calc(100% + 21px);
  z-index: 5;
  background: rgb(250, 250, 252);
  display: flex;
  align-items: center;
  padding: 0.5rem 1.5rem 0.5rem 9rem;
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.header-logo-bar img.logo {
  position: absolute;
  top: -18px;
  left: 15px;
  width: 105px;
  height: 105px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgb(128, 128, 128);
  z-index: 10;
  background: #fff;
}

.header-logo-bar .site-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: rgb(40, 26, 57);
  text-decoration: none;
}

/* Slideshow slides */
.slideshow {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

.slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.slide.active { opacity: 1; }

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* Slideshow arrows */
.slide-prev, .slide-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  background: rgba(255,255,255,0.5);
  border: none;
  font-size: 1.5rem;
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  transition: background 0.2s;
}
.slide-prev { left: 8px; }
.slide-next { right: 8px; }
.slide-prev:hover, .slide-next:hover { background: rgba(255,255,255,0.85); }

/* ===== NAVIGATION ===== */
.site-nav {
  background: var(--color-nav-bg);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: stretch;
}

/* Nav items — bordered cells like the original */
.nav-links {
  display: flex;
  list-style: none;
  width: 100%;
}

.nav-links > li {
  position: relative;
  flex: 1;
  border-right: 1px solid var(--color-border);
  text-align: center;
}

.nav-links > li:first-child {
  border-left: 1px solid var(--color-border);
}

.nav-links > li > a,
.nav-links > li > span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--nav-height);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;                 /* corrected: source nav font is bold */
  color: var(--color-nav-text);     /* corrected: source nav text colour */
  text-transform: none;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  padding: 0 0.5rem;
  transition: background 0.15s;
}

.nav-links > li > a:hover,
.nav-links > li > span:hover,
.nav-links > li.active > a {
  background: var(--color-nav-bg);
  color: rgb(85, 85, 85);           /* corrected: source nav hover text colour */
  text-decoration: none;
}

/* Dropdown */
.nav-links .dropdown {
  position: absolute;
  top: var(--nav-height);
  left: 0;
  background: var(--color-nav-bg);
  border: 1px solid var(--color-border);
  min-width: 180px;
  display: none;
  z-index: 200;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.nav-links li:hover .dropdown { display: block; }

.nav-links .dropdown a {
  display: block;
  padding: 0.55rem 1rem;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-nav-text);
  text-decoration: none;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.15s;
}

.nav-links .dropdown a:last-child { border-bottom: none; }
.nav-links .dropdown a:hover { color: rgb(85, 85, 85); }

/* Mobile hamburger */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.75rem 1rem;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-nav-text);
  width: 100%;
  text-align: left;
}

/* ===== PAGE CONTENT ===== */
.page-content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

/* ===== TYPOGRAPHY =====
   Corrected: heading colour now uses the source's dark grey
   (rgb(85,85,85)) rather than near-black, EXCEPT --color-accent
   which is intentionally retained as green per business decision.
   Headings below use --color-accent (green) for visual identity,
   while body greys come from --color-text. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-accent);
}

h1 { font-size: 1.9rem; margin-bottom: 0.25rem; }
h2 { font-size: 1.75rem; margin-bottom: 0.25rem; } /* corrected: source homepage title is 28px */
h3 { font-size: 1.15rem; margin-bottom: 0.75rem; }
h5, h6 { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-light); margin-bottom: 0.4rem; }

p { margin-bottom: 1rem; }

.page-subtitle {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-light);
  margin-bottom: 2rem;
}

/* ===== TWO-COLUMN CONTENT ROW =====
   Corrected: source homepage image slot is 316x421 (~3:4 portrait),
   not 4:3 landscape. Column split corrected to roughly 38/62
   (316:515) to match source measurements. */
.content-row {
  display: grid;
  grid-template-columns: 38fr 62fr;
  gap: 2rem;
  align-items: start;
  margin-bottom: 2.5rem;
}

.content-row.img-right {
  grid-template-columns: 62fr 38fr;
}

.content-row img {
  width: 100%;
  aspect-ratio: 3 / 4;     /* corrected: portrait, was 4/3 landscape */
  object-fit: cover;
  display: block;
}

@media (max-width: 680px) {
  .content-row,
  .content-row.img-right { grid-template-columns: 1fr; }
  .content-row.img-right .col-text { order: -1; }
}

/* ===== FULL-WIDTH IMAGE BLOCK ===== */
.full-img {
  width: 100%;
  margin-bottom: 1.5rem;
}

.full-img img {
  width: 100%;
  max-height: 600px;
  object-fit: cover;
}

/* ===== SECTION HEADING (h5/h6 style used in activity pages) ===== */
.section-label {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-light);
  margin-bottom: 0.4rem;
  display: block;
}

/* ===== ACTIVITIES GRID ===== */
.activity-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.activity-card {
  text-decoration: none;
  color: var(--color-text);
  display: block;
}

.activity-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  margin-bottom: 0.5rem;
  display: block;
}

.activity-card span {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-accent-mid);
  text-decoration: underline;
}

.activity-card:hover span { color: var(--color-accent); }

@media (max-width: 600px) {
  .activity-grid { grid-template-columns: 1fr; }
}

/* ===== PHOTO GRID ===== */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  margin-top: 1.5rem;
}

.photo-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

@media (max-width: 560px) {
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== BLOG GRID ===== */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 1.5rem;
}

.blog-card {
  border: 1px solid var(--color-border);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s;
}

.blog-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }

.blog-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.blog-card-body {
  padding: 1rem 1.1rem 1.3rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-card h3 {
  font-size: 0.95rem;
  color: var(--color-text);
  margin-bottom: 0.3rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
}

.blog-card-meta {
  font-size: 0.75rem;
  color: var(--color-text-light);
  font-family: var(--font-heading);
  margin-bottom: 0.5rem;
}

.blog-card p {
  font-size: 0.85rem;
  color: var(--color-text-light);
  margin-bottom: 0;
  flex: 1;
}

/* ===== INFO BOX ===== */
.info-box {
  background: #f8f8f8;
  border-left: 3px solid #888;
  padding: 1.25rem 1.5rem;
  margin: 1.25rem 0;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  line-height: 1.9;
}

/* ===== PROMINENT LINK ===== */
.prominent-link {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent-mid);
  text-decoration: underline;
  margin: 0.5rem 0;
}

.prominent-link:hover { color: var(--color-accent); }

/* ===== DIVIDER ===== */
hr.section-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 2rem 0;
}

/* ===== FOOTER =====
   Kept dark per business decision — source Wix footer is white,
   but the dark footer is retained intentionally here. */
.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.footer-copy {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  opacity: 0.6;
}

.footer-social {
  display: flex;
  gap: 1rem;
}

.footer-social a {
  color: var(--color-footer-text);
  font-family: var(--font-heading);
  font-size: 0.75rem;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.footer-social a:hover { opacity: 1; }

/* ===== ADMIN / LEGAL TEXT ===== */
.legal-content h2 { margin-top: 2rem; margin-bottom: 0.5rem; font-size: 1.1rem; }
.legal-content h3 { margin-top: 1.5rem; font-size: 0.95rem; }
.legal-content p, .legal-content li { margin-bottom: 0.75rem; font-size: 0.92rem; }
.legal-content ul, .legal-content ol { padding-left: 1.5rem; margin-bottom: 1rem; }

/* ===== RESPONSIVE NAV ===== */
@media (max-width: 700px) {
  .nav-toggle { display: block; }

  .nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    border-top: 1px solid var(--color-border);
  }

  .nav-links.open { display: flex; }

  .nav-links > li {
    flex: none;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
  }

  .nav-links > li:first-child { border-left: none; }

  .nav-links > li > a,
  .nav-links > li > span {
    justify-content: flex-start;
    padding: 0 1rem;
    height: 44px;
  }

  .nav-links .dropdown {
    position: static;
    border: none;
    box-shadow: none;
    background: var(--color-nav-bg);
    display: block;
  }

  .nav-links .dropdown a { padding: 0.5rem 1.5rem; }

  .nav-inner { flex-wrap: wrap; position: relative; }
}

/* ===== UTILITY ===== */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 2rem; }

/* ===== BLOG POST (added v0.4, 2026-10-27) =====
   Single reading column (~720px) centred inside the 980px page.
   Landscape photos fill the column; portrait photos and videos are
   capped at 85% of the screen height and centred. No lightbox (backlog). */
.post {
  max-width: 720px;
  margin: 0 auto;
}

.post h1 { margin-bottom: 0.5rem; }

.post-meta {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-light);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.post-cover { margin: 0 0 2rem; }
.post-cover img { width: 100%; height: auto; }

.post-body h2 {
  font-size: 1.35rem;
  margin: 2.25rem 0 0.75rem;
}

.post-body ul,
.post-body ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.post-body li { margin-bottom: 0.35rem; }

.post-figure { margin: 1.75rem 0; }

.post-figure img,
.post-figure video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 85vh;
  margin: 0 auto;
}

.post-figure video { background: #000; }

.post-figure figcaption {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-text-light);
  margin-top: 0.45rem;
  text-align: center;
}

.post-back {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}