/* ----------------------
   GLOBAL FIXES
------------------------*/

/* Prevent automatic text scaling on mobile */
html {
  -webkit-text-size-adjust: 100%; /* Safari / iOS */
  -ms-text-size-adjust: 100%;     /* IE */
  text-size-adjust: 100%;         /* Modern browsers */
}

/* ----------------------
   HOVER TEXT INSIDE CONTENT
------------------------*/
.hover-text {
  color: black;
  transition: color 0.3s ease;
  font-family: 'Arial Black', Arial, sans-serif;
}

.hover-text:hover {
  color: red;
}

/* ----------------------
   CONTAINER / LAYOUT
------------------------*/
.container {
  display: flex;
  min-height: 100vh;
  width: 100%;
  flex-wrap: nowrap; /* keep sidebar + content side by side */
}

.sidebar {
  width: 350px; /* match index.css */
  padding: 20px;
  box-sizing: border-box;
  background-color: #fff;
  flex-shrink: 0;
  font-size: 14px; /* enforce font size */
}

.sidebar h1 {
  font-size: 18px; /* keep BEYOND GAZE CATALOGUE bigger */
}

.sidebar nav a,
.sidebar .info p,
.sidebar .info a {
  font-size: 14px; /* enforce consistent font size, prevents scaling */
}

/* ----------------------
   CONTENT AREA
------------------------*/
.content {
  flex: 1;
  margin-left: 0; /* will rely on flex for positioning */
  padding: 20px;
  box-sizing: border-box;
  max-width: calc(100% - 350px);
  background-color: transparent;
  word-wrap: break-word;
}

.content p {
  margin-bottom: 15px;
}

/* ----------------------
   RESPONSIVE: MOBILE DEVICES
------------------------*/
@media screen and (max-width: 768px) {
  .container {
    flex-direction: column; /* stack sidebar on top */
  }

  .sidebar {
    width: 100%;
    font-size: 14px; /* consistent mobile font */
    padding: 15px;
  }

  .sidebar h1 {
    font-size: 18px;
  }

  .content {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    padding: 15px;
  }
}