/* =====================================================================
   statement.css
   Styles for the Personal Statement page (statement.html).
   Controls the page layout, heading, and body text formatting.
   ===================================================================== */


/* --- PAGE TOP BAR ---
   Shared pattern with portfolio.html — back link + section label.
   Duplicated here for clarity, but you could also move it to shared.css
   if you want it on all pages without repeating. */
.page-topbar {
  display: flex;
  /* Side-by-side layout for back link and label. */

  align-items: center;
  justify-content: space-between;

  padding: 12px 40px;
  /* Adjust side padding (40px) to change breathing room. */

  border-bottom: 1px solid #C2ADA5;
  /* Subtle dividing line under the bar. Remove or change color as desired. */

  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.04em;
}

.back-link {
  color: var(--color-text);
  text-decoration: none;
  transition: opacity 0.2s;
}

.back-link:hover {
  opacity: 0.6;
  /* Slight fade when hovering the back link. */
}

.page-label {
  font-weight: 600;
  opacity: 0.7;
}


/* --- MAIN CONTENT AREA --- */
.statement-main {
  max-width: 1000px;
  /* Controls how wide the text column is. */

  margin: 0 auto;
  /* Centers the column horizontally. Keep this. */

  padding: 24px 32px 80px;
  /* 24px top gap, 32px side padding, 80px bottom.
     Adjust 24px to change how far the title is from the top bar. */
}


/* --- PAGE TITLE --- */
.statement-title {
  font-family: var(--font-display);
  /* In Obra Letra */

  font-size: clamp(2.2rem, 6vw, 3.5rem);
  /* Responsive size. Max (3.5rem) can be increased for a larger title.
     clamp() means it scales between min and max depending on screen size. */

  font-weight: 400;
  /* 600 for semi bold */

  text-align: center;
  /* Centers the title horizontally. */

  margin: 0 0 24px 0;
  /* Space below the title before the first paragraph.
     Increase for more breathing room */

  color: var(--color-text);
}


/* --- STATEMENT BODY ---
   The container for all paragraph text. */
.statement-body {
  font-family: var(--font-body);
  /* The Season */

  font-size: clamp(1rem, 2.2vw, 1.15rem);
  /* Readable body size. Max is 1.15rem — increase to 1.3rem for larger text. */
  
  line-height: 1.85;
  /* Generous line spacing for comfortable reading.
     Decrease to 1.6 for tighter paragraphs, increase to 2.0 for more open. */

  color: var(--color-text);

  text-align: center;
  /* Centers the paragraph text
     Change to "left" for left-aligned text, or "justify" for newspaper-style. */
}

.statement-body p {
  margin: 0 0 32px 0;
  /* Space between paragraphs.
     Increase to 48px for more space between paragraphs, decrease to 16px for tighter. */
}

.statement-body p:last-child {
  margin-bottom: 0;
  /* Removes extra space after the last paragraph. Keep this for clean layout. */
  text-align: end;
  /* Pushes name to end of page. Change to center to center name*/

}


/* --- RESPONSIVE: MOBILE --- */
@media (max-width: 600px) {
  /* Rules that only apply on screens 600px wide or smaller (phones). */

  .page-topbar {
    padding: 10px 20px;
    /* Tighter side padding on mobile. */
  }

  .statement-main {
    padding: 32px 20px 60px;
    /* Reduced padding on mobile. */
  }


}