/*
  CallForMe Website Stylesheet
  A clean and mature design to present information clearly and
  professionally. The colour palette uses soft blues and neutrals
  inspired by the brand imagery. Layouts adapt responsively to
  different screen sizes while maintaining readability and visual
  hierarchy. Small shadows and rounded corners add depth without
  overwhelming the content.
*/

/* Base resets */
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #f7f9fc;
  color: #333;
  line-height: 1.6;
}

/* Navigation styling */
header {
  background-color: #ffffff;
  border-bottom: 1px solid #eaeaea;
  padding: 10px 20px;
  position: sticky;
  top: 0;
  z-index: 1000;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
}

nav li {
  margin: 0;
}

nav a {
  text-decoration: none;
  color: #333;
  font-weight: 600;
  transition: color 0.2s;
}

nav a:hover,
nav a:focus {
  color: #0078d7;
}

.logo-container img {
  height: 56px;
}

/* Ensure the logo icon and text align nicely */
.logo-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-name {
  font-size: 1.3em;
  font-weight: bold;
  color: #073763;
}

/* Hero section */
.hero {
  text-align: center;
  padding: 60px 20px;
  background: linear-gradient(135deg, #e9f2fb 0%, #ffffff 100%);
}

.hero h1 {
  font-size: 2.5em;
  margin-bottom: 0.4em;
  color: #073763;
  line-height: 1.2;
}

.hero p {
  font-size: 1.2em;
  color: #5a5a5a;
  margin: 0;
}

/* Content sections */
.intro,
.features,
.how-it-works,
.note,
.contact,
.policy-content {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}

.intro p {
  font-size: 1.05em;
}

.features h2,
.how-it-works h2,
.contact h2 {
  font-size: 1.8em;
  margin-bottom: 0.5em;
  color: #073763;
}

.features ul,
.how-it-works ol {
  margin-left: 20px;
}

.features ul li,
.how-it-works ol li {
  margin-bottom: 0.4em;
}

/* Screenshots grid */
.screenshots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 20px;
}

.screenshot img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.screenshot img:hover,
.screenshot img:focus {
  transform: scale(1.02);
}

/* Note box */
.note {
  background-color: #fff8e1;
  border-left: 4px solid #f1c232;
  padding: 20px;
  border-radius: 4px;
  font-size: 0.95em;
}

/* Contact section */
.contact a {
  color: #0078d7;
  text-decoration: none;
}

.contact a:hover,
.contact a:focus {
  text-decoration: underline;
}

/* Policy pages styling */
.policy-container h1 {
  margin-top: 1.5em;
  font-size: 2em;
  color: #073763;
}

.policy-container p,
.policy-container li {
  font-size: 0.95em;
  line-height: 1.4;
}

.policy-container ul,
.policy-container ol {
  margin-left: 20px;
}

/* Prevent text selection for policies to deter copying */
.policy-container,
.policy-container * {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

/* Footer */
footer {
  text-align: center;
  padding: 20px;
  font-size: 0.85em;
  color: #777;
  border-top: 1px solid #eaeaea;
  background-color: #f7f9fc;
}