/* styles.css */

/* Reset margins/padding, set full viewport, background, no scroll */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: sans-serif;
  background-color: #2d2c33;
  overflow-x: hidden;
}

:root {
  --footer-height: 80px; /* Height of fixed footer */
}

/* Main flex container to stack content then reserve footer space */
.page-wrapper {
  height: 100%;        /* Full height of viewport */
  width: 100%;
  display: flex;       /* Enable flex layout */
  flex-direction: column; /* Stack children vertically */
  overflow: hidden;    /* Hide any overflow */
}

/* Container for GIF and (commented) sidebars */
.gif-container {
  flex: 1; /* Grow to fill remaining flex space */
  display: flex; /* Flex layout for child elements */
  /* grid-template-columns: 1fr auto 1fr; */ /* (unused) grid fallback */
  align-items: center; /* Vertical center children */
  background-color: rgba(42, 42, 42, 0.8); /* Semi-transparent bg */
}

/* Sidebar placeholder flex items */
.sidebar {
  display: flex;       /* Center content inside */
  flex-grow: 2;        /* Take equal space if children were present */
  justify-content: center; /* Horizontal center */
  align-items: center; /* Vertical center */
}

/* Sidebar images styling (commented out currently) */
.sidebar img {
  width: clamp(140px, 8vw, 140px); /* Responsive clamp */
  max-height: 100%;                /* Never exceed container height */
  image-rendering: pixelated;      /* Pixel art look */
  object-fit: contain;             /* Contain within box */
}

/* Center GIF wrapper */
.center-gif {
  display: flex;       /* Flex to center image */
  justify-content: center;
  align-items: center;
  height: 100%;        /* Fill parent height */
  width: 100%;         /* Fill parent width */
}
.center-gif img {
  height: 100%;        /* Fill container height */
  max-width: 100%;     /* Never exceed container width */
  object-fit: contain; /* Maintain aspect ratio */
  image-rendering: pixelated; /* Crisp pixels */
  display: block;      /* Remove inline gap */
}

/* Footer fixed to bottom */
.footer {
  position: fixed;     /* Fix position relative to viewport */
  bottom: 0; left: 0; right: 0; /* Span full width at bottom */
  height: var(--footer-height); /* Use CSS variable */
  background-color: #3055B3; /* Footer bg color */
  display: flex;       /* Layout children in a row */
  justify-content: space-between; /* Spread left/right sections */
  align-items: center; /* Vertical center items */
  padding: 0 16px;     /* Horizontal padding */
  z-index: 1000;       /* Sit above other content */
  box-sizing: border-box; /* Include padding in height */
}
.footer-left {
  display: flex;       /* Horizontal layout */
  flex-wrap: wrap;     /* Wrap if too many items */
  gap: 12px;           /* Spacing between icons */
  align-items: center; /* Vertical center icons */
}
.footer-left img {
  height: 100%;        /* Fill footer height */
  image-rendering: pixelated;
  transition: transform 0.2s ease; /* Hover scale effect */
}
.footer-left img:hover {
  transform: scale(1.2);
  image-rendering: pixelated;
}
.footer-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  max-width: 25vw;     /* Limit to 25% of viewport width */
}
.avax-logo {
  max-height: 60px;    /* Limit logo height */
  max-width: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

/* Portrait Media Query */
@media (orientation: portrait) {
  .gif-container {
    grid-template-columns: 1fr; /* Collapse to one column */
  }
  .sidebar {
    display: none; /* Hide sidebars in portrait */
  }
  .center-gif img {
    object-fit: cover; /* Cover container fully */
  }
  .footer {
    flex-direction: column; /* Stack footer items */
    height: auto;
    padding: 8px;
    gap: 8px;
  }
  .footer-left img,
  .avax-logo {
    height: 48px; /* Smaller icons in portrait */
  }
}

/* Landscape Media Query: pin GIF above footer */
@media (orientation: landscape) {
  :root {
    --footer-height: 80px; /* Reinforce variable */
  }

  .gif-container {
    position: fixed;    /* Fix to viewport */
    top: 0;             /* Top edge at viewport top */
    left: 0;            /* Left edge at viewport left */
    right: 0;           /* Right edge at viewport right */
    bottom: var(--footer-height); /* Stop at footer top */
    background-color: #2d2c33; /* Solid bg in landscape */
    overflow: hidden;   /* Hide any overflow */
    z-index: 1;         /* Underneath footer */
  }
}