/* ---------------- GLOBAL ---------------- */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* Original Font Setting */
  font-family: Arial, Helvetica, sans-serif;
  background-color: white;
  color: black;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ---------------- HEADER & NAV ---------------- */
header {
  /* CRITICAL FIX: Ensures the header stays visible while scrolling */
  position: fixed !important; 
  top: 0;
  width: 100%;
  background: white;
  border-bottom: 2px solid black;
  z-index: 1000;
}

.navbar {
  display: flex;
  justify-content: center;
  padding: 1rem;
  gap: 2rem;
}

.nav-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: grey;
  cursor: pointer;
  text-transform: uppercase;
  transition: color 0.3s;
}

.nav-btn:hover { color: black; }
.nav-btn.active { color: orange; }

/* ---------------- MAIN LAYOUT ---------------- */
main {
  margin-top: 80px;
  padding: 2rem;
  /* Desktop Max Width: 460px + 20px gap + 460px = 940px */
  max-width: 940px; 
  margin-left: auto;
  margin-right: auto;
}

/* ---------------- ARTICLE ANIMATION ---------------- */
.article {
  padding: 2rem 0;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.article.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------- COLUMNS: CSS GRID IMPLEMENTATION (Desktop) ---------------- */
.columns {
  display: grid;
  /* Defines two explicit columns of 460px with a 20px gap */
  grid-template-columns: 460px 460px;
  gap: 20px;
}

.left-column {
  text-align: left;
}

.right-column {
  display: flex;
  flex-direction: column;
  /* Text justification for desktop */
  text-align: justify; 
  word-break: break-word;
}

/* ---------------- MEDIA SIZING ---------------- */
.media-sizer {
  width: 100%;
  max-width: 100%; 
  height: auto; 
  margin: 0 auto 1rem auto;
}

/* Force media elements to fill the column size */
.article img,
.media-sizer iframe {
    width: 100% !important; 
    max-width: 100% !important; 
    height: auto;
    display: block;
}

/* ---------------- ICON GRID & SEPARATORS ---------------- */
.icons {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.icon-row {
  display: flex;
  justify-content: space-around;
  margin: 1rem 0;
}

.icon {
  width: 50px;
  height: 50px;
  background-size: contain;
  background-repeat: no-repeat;
  transition: filter 0.3s;
  filter: grayscale(100%);
}

.icon:hover { filter: grayscale(0%); }

/* Icon placeholders - CONFIRM THESE PATHS ARE CORRECT */
.mail { background-image: url('icons/mail.png'); }
.insta { background-image: url('icons/insta.png'); }
.fb { background-image: url('icons/fb.png'); }
.yt { background-image: url('icons/yt.png'); }

/* ---------------- SEPARATORS ---------------- */
hr {
  border: none;
  border-top: 2px solid black;
  margin: 3rem 0;
}

/* ---------------- MOBILE FIX (Refined) ---------------- */
@media (max-width: 768px) {
  
  /* CRITICAL FIX 1: Ensures font is sans-serif on mobile */
  body {
    font-family: Arial, Helvetica, sans-serif !important; 
  }

  main {
    padding: 1rem;
    max-width: 100%;
    /* Ensure no horizontal scrolling starts here */
    overflow-x: hidden; 
  }

  /* CRITICAL FIX 2: Force GRID to a single column for mobile */
  .columns {
    grid-template-columns: 1fr; /* 1 fraction unit, making it 100% */
    gap: 1.5rem;
    width: 100%; 
    max-width: 100%;
  }

  /* CRITICAL FIX 3: Force columns to 100% of the viewport and fix alignment */
  .left-column,
  .right-column {
    width: 100%;
    max-width: 100%; 
    box-sizing: border-box;
    /* Force left-alignment for ALL column content on mobile */
    text-align: left; 
    display: block; 
  }

  /* CRITICAL FIX 4: Remove text justification to prevent clipping */
  .right-column p {
    text-align: left !important;
    hyphens: auto;
  }

  /* CRITICAL FIX 5: Ensure media fully shrinks and contains itself */
  .media-sizer,
  .media-sizer img,
  .media-sizer iframe {
    width: 100% !important; 
    max-width: 100% !important; 
    height: auto !important; 
    min-width: 0 !important;
    margin: 0 auto 1rem auto;
  }
}