/* --- Global Reset --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  overflow: hidden; /* Prevents the whole page from scrolling, keeping it locked to the grid */
  background: #000; /* Color of the borders between panels */
}

/* --- Dynamic Grid Layout --- */
main {
  display: grid;
  /* Default state: 4 equal squares */
  grid-template-columns: 50vw 50vw;
  grid-template-rows: 50vh 50vh;
  width: 100vw;
  height: 100vh;
  gap: 2px; /* Creates the border effect between panels */
  transition: grid-template-columns 0.4s ease, grid-template-rows 0.4s ease;
}

/* 
  The Magic: Grid shifting based on which panel is open. 
  When a panel opens, it claims 85% of the screen width/height.
*/
main:has(#panel-1[open]) {
  grid-template-columns: 80vw 20vw;
  grid-template-rows: 80vh 20vh;
}
main:has(#panel-2[open]) {
  grid-template-columns: 20vw 80vw;
  grid-template-rows: 80vh 20vh;
}
main:has(#panel-3[open]) {
  grid-template-columns: 80vw 20vw;
  grid-template-rows: 20vh 80vh;
}
main:has(#panel-4[open]) {
  grid-template-columns: 20vw 80vw;
  grid-template-rows: 20vh 80vh;
}

/* --- Panel Styling --- */
details {
  background: #282828; /* All panels start dark grey */
  color: #ffffff;      /* All panels start with white text */
  overflow: auto; 
  transition: background 0.3s ease, color 0.3s ease;
}

/* Apply the hover highlight to all panels EXCEPT panel 1 */
details:not(#panel-1):not([open]):hover {
  background: #383838; 
}

/* Quadrant 1: ALWAYS stays dark grey, even when open */
#panel-1[open] {
  background: #282828;
  color: #ffffff;
}

/* Quadrants 2, 3, & 4: Flip to white background and black text when open */
#panel-2[open], 
#panel-3[open], 
#panel-4[open] {
  background: #ffffff;
  color: #000000;
}



/* --- Summary (The clickable quadrant face) --- */
summary {
  list-style: none;
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
}

summary::-webkit-details-marker {
  display: none;
}

/* When CLOSED: center the summary content */
details:not([open]) summary {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

/* When OPEN: position the summary at the top like a header */
details[open] summary {
  padding: 1.5rem 2rem 0 2rem;
  font-size: 1rem;
  display: flex;
  align-items: center;
}

/* Custom summary text colors for opened panels so they remain readable */
#panel-1[open] summary {
  color: #bbbbbb; /* Soft grey text for the dark panel */
}
#panel-2[open] summary,
#panel-3[open] summary,
#panel-4[open] summary {
  color: #666666; /* Dark grey text for the white panels */
}



/* --- Logo GIF Behavior --- */
.logo-gif {
  /* Using object-fit ensures the image scales up/down without stretching or distorting */
  object-fit: contain; 
  transition: transform 0.3s ease, width 0.4s ease, height 0.4s ease;
}

/* Scales the GIF up slightly when hovered */
.logo-gif:hover {
  transform: scale(1.15);
}

/* 1. When NO panels are open (50/50 grid): Logo takes up 75% of the quadrant */
main:not(:has(details[open])) .logo-gif {
  width: 75%;
  height: 75%;
}

/* 2. When ANOTHER panel is open (this panel is closed): Logo takes up 100% of its shrunken quadrant */
main:has(details[open]) details:not([open]) .logo-gif {
  width: 80%;
  height: 80%;
}

/* 3. When THIS panel (Quadrant 1) is open: Shrink to a standard header size so it doesn't take up the whole screen */
#panel-1[open] .logo-gif {
  width: 20%;
  height: 20%;
}


/* --- Pika GIF Behavior --- */
.pika-gif {
  width: 5vw;         /* Matches the logo's scaling */
  max-width: 100px; 
  min-width: 10px; 
  
  /* Use vw for the margin so the gap shrinks on small screens too */
  margin-left: 2vw;    
}

/* Hides the Pika GIF entirely when Panel 1 is closed */
#panel-1:not([open]) .pika-gif {
  display: none;
}
/* --- Internal Content Styling --- */
.content {
  padding: 0 2rem 2rem 2rem;
  max-width: 1500px;
}

.content h1 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  margin-top: 0.5rem;
}

.content h3, .content a {
  margin-bottom: 1.5rem;
  margin-top: 0.5rem;
}

.content p, .content ul {
  margin-bottom: 1rem;
  line-height: 1.6;
}


.content ul {
  padding-left: 1.5rem;
}

/* Form Styles */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.contact-form input, .contact-form textarea, .contact-form select {
  padding: 0.5rem;
  border: 1px solid #000;
  font-family: inherit;
  background-color: #fff;
}

.contact-form button {
  padding: 0.75rem;
  background: #000;
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: bold;
}

.contact-form button:hover {
  background: #333;
}