/* ──────────────────────────────────────
   1. Global reset & fonts
   ────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; margin:0; padding:0; }
html, body { height:100%; font-family: sans-serif; background:#fff; }

/* ──────────────────────────────────────
   2. Layout containers
   ────────────────────────────────────── */
.container {
  padding-top: 1.5rem;      
  padding-bottom: 2rem;   
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* Logo */
    .logo {
  display: flex;          /* you already have this */
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;  /* prevents underline */
  color: inherit;         /* keeps text black */
}
 
   .logo img {
     width: 60px;
     height: auto;
     max-width: 60px;
     max-height: 60px;
     object-fit: contain;
}

    .logo span {
      display: block;
      font-size: 0.95rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 1.8px;
      color: #000;
    }
/* ──────────────────────────────────────
   4. Hamburger button
   ────────────────────────────────────── */
.menu-btn {
  position:absolute;
  top:1.5rem;
  left:1.5rem;
  font-size:2rem;
  cursor:pointer;
  z-index:30;
  transition:transform .2s;
}
.menu-btn.open { transform:rotate(90deg); }

/* ──────────────────────────────────────
   5. Side menu
   ────────────────────────────────────── */
.sidebar {
  position:fixed;
  top:0; left:0;
  width:260px;
  height:100%;
  background:#fff;
  box-shadow:2px 0 8px rgba(0,0,0,.1);
  transform:translateX(-100%);
  transition:transform .3s ease;
  z-index:20;
  display:flex;
  flex-direction:column;
  padding-top:5rem;
}
.sidebar.open { transform:translateX(0); }

.overlay {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s;
  z-index:10;
}
.overlay.open { opacity:1; visibility:visible; }

/* ──────────────────────────────────────
   6. Navigation links
   ────────────────────────────────────── */
.nav-list {
  list-style:none;
  padding:0 1.5rem;
}
.nav-list li {
  margin-bottom:1.5rem;
}
.nav-list a {
  color:#222;
  text-decoration:none;
  font-size:1.1rem;
  text-transform:uppercase;
  letter-spacing:.5px;
  transition:color .2s;
}
.nav-list a:hover { color:#555; }
.article h1 a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* Underline heading links on hover to indicate interactivity */
.article h1 a:hover {
  text-decoration: underline;
}

/* ──────────────────────────────────────
   8. Post list on index/posts pages
   ────────────────────────────────────── */
/* Container for posts list */
.post-list {
  width: 100%;
  max-width: 800px;
  margin-top: 2rem;
  padding: 0 1.5rem;
}
/* Individual post item */
.post-item {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #e0e0e0;
}
.post-item:last-child {
  border-bottom: none;
}
.post-item h2 {
  font-size: 1.5rem;
  margin-bottom: 0.3rem;
  font-weight: 600;
}
.post-item .meta {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 0.6rem;
}
.post-item p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #444;
}
.post-item a {
  text-decoration: none;
  color: inherit;
  display: block;
}
.post-item a:hover h2 {
  text-decoration: underline;
}

/* ──────────────────────────────────────
   9. Gallery & Lightbox for Views page
   ────────────────────────────────────── */
/* Gallery container */
.views-gallery {
  width: 100%;
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
}
.views-gallery h1 {
  font-size: 1.8rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 2rem;
  color: #000;
}
/* Responsive grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
.gallery-grid figure {
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.gallery-grid figure:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.gallery-grid img {
  width: 100%;
  height: auto;
  display: block;
}
.gallery-grid figcaption {
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
  color: #444;
  font-style: italic;
  text-align: center;
  background: #fafafa;
}

/* Lightbox overlay */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 50;
}

.lightbox-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* Wrapper constrains the image safely */
.lightbox-wrapper {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;              /* prevents any spillover */
  display: flex;
  align-items: center;
  justify-content: center;
   background: transparent;
}

/* Ensures all images fit INSIDE the frame */
.lightbox-image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;           /* always contain within box */
  object-position: center;       /* keeps image centered */
  display: block;
  border-radius: 4px;
}


/* ──────────────────────────────────────
   10. Adjustments for main containers
   ────────────────────────────────────── */
/* Remove full-height and top-padding from main content areas that also use the 'container' class. */
main.container {
  min-height: auto;
  padding-top: 0;
}

/* HOME PAGE VIEWS HERO */

.home-views-hero {
  width: 100%;
  max-width: 960px;
  margin: 3rem auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* ──────────────────────────────────────
   HERO IMAGE NAVIGATION ARROWS – FIXED CENTERING
   ────────────────────────────────────── */

.hero-image-frame {
  flex: 1;
  max-width: 720px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;           /* ← THIS IS REQUIRED */
}

/* Arrow base styles (keep your existing ones and just add these) */
.hero-arrow {
  position: absolute;           /* ← make them absolutely positioned */
  top: 50%;                     /* ← start at vertical middle */
  transform: translateY(-50%);  /* ← pull up by half their own height */
  z-index: 10;                  /* ← stay on top of the image */

  border: none;
  background: rgba(0, 0, 0, 0.4);
  color: white;
  font-size: 3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  border-radius: 50%;
  user-select: none;
  transition: all 0.2s ease;
}

.hero-arrow:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: translateY(-50%) scale(1.1);   /* keep vertical centering on hover */
}

/* Position left & right arrows */
.hero-arrow-left {
  left: 1rem;
}

.hero-arrow-right {
  right: 1rem;
}

.hero-placeholder {
  color: #eee;
  font-size: 0.9rem;
  letter-spacing: 0.8px;
}

.hero-image-frame img {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 70vh;        /* prevent hero from being taller than viewport */
  object-fit: contain;     /* show whole image */
  object-position: center;
  background: transparent; /* no black behind image */
  display: block;
}

.hero-arrow {
  border: none;
  background: none;
  font-size: 2.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.75rem;
  user-select: none;
}

.hero-arrow:hover {
  transform: translateY(-1px);
}

.home-views-hero.is-hidden {
  display: none;
}

/* ──────────────────────────────────────
   7. Material Icons
   ────────────────────────────────────── */
.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 48;
}