/* Base font size variable */
:root {
  --base-font-size: 1em; /* Default font size */
  --background-color: #ffffff;
  --text-color: #000000;
  --highlight-color: greenyellow;
  --unnumbered-highlight-color: tomato;
  --footer-bg-color: #d1d1d1;
  --footer-text-color: #333;
  --link-color: #0645ad;        /* standard blue for light mode */
  --link-hover-color: #007BFF;  /* darker blue on hover */

  /* iOS safe-area insets (for notch / home indicator) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  -webkit-tap-highlight-color: transparent;
}

/* Dark theme overrides */
body.dark-mode {
  --background-color: #2a2a2a;
  --text-color: #f0f0f0;
  --highlight-color: #517d20;
  --unnumbered-highlight-color: #954329;
  --footer-bg-color: #3f3f3f;
  --footer-text-color: #ddd;
  --link-color: #89b4fa;        /* soft blue for dark background */
  --link-hover-color: #007BFF;  /* white on hover, optional */
}

a {
  color: var(--link-color);
  text-decoration: underline;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--link-hover-color);
}

@media (hover: hover) and (pointer: fine) {
  .settings-button:hover {  color: var(--link-hover-color);
}
}

.settings-button:active {
  color: var(--link-hover-color);
}

/* Universal font styling */
body {
font-family:
  "Noto Sans",
  -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
  system-ui,
  "Segoe UI",           /* Windows */
  Roboto,               /* Android/ChromeOS */
  "Helvetica Neue", Arial,
  sans-serif;
  letter-spacing: 2px;
  overflow-x: hidden;
  margin: 0;
  background-color: var(--background-color);
  color: var(--text-color);
  /* Prevent content from sitting under the home indicator / rounded corners */
  padding-bottom: var(--safe-bottom);
}

h1 {
  text-align: center;
  font-size: 2em;
  margin-bottom: 20px;
  letter-spacing: 2px;
}

/* Header layout */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    padding-top: calc(10px + var(--safe-top));
    font-family: 'Noto Sans', sans-serif;
    border-bottom: 1px solid #ddd;
    position: fixed;
    z-index: 20; /* Higher than settings menu to keep it visible */
    width: 100vw;
    background-color: var(--background-color);
    color: var(--text-color);
    top: 0;
    font-size: 1em; /* Fixed size for header text */
    left: 0;
    right: 0;
    box-sizing: border-box;
    padding-left: calc(10px + var(--safe-left));
    padding-right: calc(10px + var(--safe-right));
  }
  
  /* Button styling for consistent appearance */
  .back-button,
  .info-button,
  .settings-button {
    background: none;
    border: none;
    font-size: 1.8em;
    cursor: pointer;
    color: var(--text-color);
    text-decoration: none;
    position: absolute;
    top: calc(50% + (var(--safe-top) / 2));
    transform: translateY(-58%);
  }
  
  /* Specific positioning */
  .back-button {
    left: calc(10px + var(--safe-left));
  }
  
  .info-button {
    left: calc(10px + var(--safe-left));
  }
  
  .settings-button {
    right: calc(24px + var(--safe-right));
  }
  
  /* Title styling */
  .title {
    font-size: 1.5em;
    text-align: center;
    margin: 0;
    flex-grow: 1;
  }
  
  /* Shared text styling for welcome and generated text */
.common-text {
  font-size: var(--base-font-size);
  font-family: 'Noto Sans', sans-serif;
  letter-spacing: 2px;
  line-height: 1.6; /* Consistent line height */
  color: var(--text-color);
  max-width: 100%; /* Prevent overflow */
  overflow-wrap: break-word;
}

.needs-space {
  padding-top: calc(63.5px + var(--safe-top));
  margin: 8px;
}