/* ==========================
   WORDPAINT MODERN CSS (rev 2)
   ========================== */

:root{
  --text-blue:#A1C6F2;
  --accent-amber:#E8A55B;
}

body {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  color: var(--text-blue);
  background: #000 url("../images/bkg_stat/satellite-view.jpg") no-repeat left top;
  background-size: cover;
}

/* Links (force orange/amber consistently) */
a {
  color: var(--accent-amber);
  text-decoration: none;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  opacity: 1.0
}
a:visited{ 
	color: var(--accent-amber);
	color: #E99900;
	} 
a:hover { color: #00B1E4; text-decoration: underline; }

.wrapper {
  max-width: 1000px;
  margin: 50px auto 30px; /* desktop spacing */
  padding: 30px 40px;
  border: 1px solid #6282DC;
  border-radius: 18px;
  box-sizing: border-box;
}

.main-content {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.quote { flex: 1; }

.quote .lead {
  font-size: 1.45rem;
  font-style: italic;
  text-shadow: -1px 1px #000;
}

.quote p {
  font-size: 1.15rem;
  line-height: 1.45em;
  text-shadow: -1px 1px #000; 
}

.author {
  text-align: right;
  margin-top: 10px;
  padding-right: 10%; /* pull left */
  font-style: italic;
  text-shadow: -1px 1px #000; 
}

/* photo alignment */
.photo { margin-top: 4%; } /* push down slightly */

.photo img {
  width: 320px;
  max-width: 100%;
  border: 1px solid #ccc;
  padding: 4px;
  background: linear-gradient(-45deg, #b5bdc8, #28343b);
}

/* bottom navigation */
.bottomnav {
  margin-top: 60px;
  padding: 15px;
  background: #345664;
  opacity: 0.7;
  border: 1px solid var(--accent-amber);
  border-radius: 15px;
  text-align: center;
  color: var(--text-blue);
}

.nav-sep {
  width: 60%;
  margin: 10px auto;
  border: 0;
  border-top: 1px solid var(--accent-amber);
}

.languages, .nav-links {
  margin: 8px 0;
}

/* ===== Tablet ===== */
@media (max-width: 900px) {
  .wrapper { margin: 30px auto; }

  .main-content {
    flex-direction: row; /* KEEP side-by-side */
  }

  .photo img {
    width: 260px;
    margin-top: 4%;
  }

  .author {
    text-align: right;
    padding-right: 30px;
  }
  
  .bottomnav {
  margin-top: -4%;
}

/* ===== Phone ===== */
@media (max-width: 600px) {
  .wrapper {
    margin: 3% 2%;
    padding: 20px 18px; /* more side breathing */
  }

  .main-content {
    flex-direction: column;
  }

  .photo {
    text-align: center;
    margin: -4% auto 0px;
  }

  .photo img {
    width: 280px; /* bigger image */
  }

  /* Move image into flow between first and second paragraphs */
  .quote {
    display: flex;
    flex-direction: column;
  }

  .quote .lead { order: 1; }
  .photo { order: 2; }
  .quote p:nth-of-type(2) { order: 3; }
  .quote p:nth-of-type(3) { order: 4; }
  .quote p:nth-of-type(4) { order: 5; }
  .author { order: 6; text-align: center; padding-right: 0; margin-bottom: 0;}

  .quote .lead { font-size: 1.2rem; }
  .quote p { font-size: .9rem;
  			line-height: 1.15em; }
}

.bottomnav {
	margin-top: 2%;
	padding: 5px;}