/* Basic reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Base typography */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #1d1d1f;
  background-color: #ffffff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Make the body a flex container so the footer can stick to the bottom */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Ensure the header and footer do not grow and the main content pushes the footer down */
.site-header,
.site-footer {
  flex-shrink: 0;
}

main,
.hero,
.page-content {
  flex: 1 0 auto;
}
.region-select select {
  border: none;
  background: transparent;
  color: #6e6e73;
  font-size: 0.75rem;
  cursor: pointer;
  padding-right: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.region a {
  color: #6e6e73;
  font-size: 0.75rem;
  text-decoration: none;
}

.region a:hover {
  text-decoration: underline;
}

/* Layout for the sitemap (plan du site) page */
.sitemap-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: flex-start;
}

/* Country/region selection page */
.country-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: flex-start;
  margin-top: 2rem;
}

.country-option {
  flex: 1 1 200px;
  max-width: 300px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.country-option:hover {
  background-color: #f5f5f7;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.country-option a {
  color: #0071e3;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
}

.country-option a:hover {
  text-decoration: underline;
}

/* Continent selector styles */
/* Remove default bullets and spacing for language lists within each continent card */
.country-option ul {
  list-style: none;
  margin: 0.5rem 0 0 0;
  padding: 0;
}

.country-option li {
  margin: 0.25rem 0;
}

/* Language selector styles */
/* Style the continent names and call-to-action links within each language card */
.country-option p {
  margin-top: 0.5rem;
  color: #6e6e73;
  font-size: 0.875rem;
}

/* Language list groups for the language selector page (Apple-style layout) */
.language-group {
  margin-top: 2rem;
}

.language-group h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #1d1d1f;
}

/* Use multi‑column layout for language lists, similar to Apple’s region selector. */
/* Language lists are displayed using a responsive grid so items fill the
   available width rather than clustering in the centre. Each item occupies
   a minimum of 160px and expands to share leftover space. */
.language-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.25rem 2rem;
}

/* Ensure list items do not allow line breaks within an item. Increase the
   vertical spacing slightly for better readability. */
.language-list li {
  margin-bottom: 0.5rem;
}

.language-list a {
  color: #0071e3;
  font-weight: 500;
  text-decoration: none;
}

.language-list a:hover {
  text-decoration: underline;
}

/* For the language selector page only, align the container to the left so it
   doesn’t appear centred like a typical page container. This uses a body
   class added to countries.html. We remove the automatic horizontal centring
   and instead apply a modest left margin matching the existing padding. */
.countries-page .container {
  /* Align the container flush to the left with a small padding and remove
     automatic centring. Only a right margin of 0 keeps the layout anchored
     to the page’s left edge. */
  margin-left: 1rem;
  margin-right: 0;
  /* Fill the full available width on the language selector page */
  max-width: none;
}

/* Override the general page-content styles on the language selector page.
   Remove the default 800px max‑width and auto centring so the content is
   anchored to the left and spreads across more horizontal space. */
.countries-page .page-content {
  max-width: none;
  margin-left: 1rem;
  margin-right: 0;
  padding-left: 0;
}

/* Extend the header container on the language selector page so that the
   navigation aligns with the full‑width content. Remove the max‑width
   constraint and anchor the header to the left while preserving a small
   horizontal padding. */
.countries-page .site-header .container {
  max-width: none;
  margin-left: 1rem;
  margin-right: 0;
  padding-left: 0;
  padding-right: 1rem;
}

.country-option .lang-select {
  display: inline-block;
  margin-top: 0.5rem;
  color: #0071e3;
  font-weight: 500;
  text-decoration: none;
}

.country-option .lang-select:hover {
  text-decoration: underline;
}

.sitemap-column {
  flex: 1 1 240px;
  min-width: 200px;
  max-width: 300px;
}

.sitemap-column h2 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #1d1d1f;
}

.sitemap-column ul {
  list-style: none;
  padding: 0;
}

.sitemap-column li {
  margin-bottom: 0.5rem;
}

.sitemap-column a {
  color: #0071e3;
  text-decoration: none;
}

.sitemap-column a:hover {
  text-decoration: underline;
}

a {
  color: #0071e3;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  text-decoration: underline;
}

/* Utility */
.container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Header */
.site-header {
  background-color: #ffffff;
  border-bottom: 1px solid #e5e5e5;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

.brand {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1d1d1f;
}

.site-header nav a {
  margin-left: 1rem;
  font-weight: 500;
  color: #1d1d1f;
}

.site-header nav a:hover {
  color: #0071e3;
}

/* Hero section */
.hero {
  text-align: center;
  padding: 4rem 1rem;
}

.hero-title {
  font-size: 4rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.hero-tagline {
  font-size: 1.5rem;
  /* Use a calligraphic style. The cursive generic family will select a flowing script if available */
  font-family: cursive;
  font-style: italic;
  color: #555555;
  margin-bottom: 3rem;
}

/* Services */
.services {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.service-card {
  flex: 1 1 250px;
  max-width: 300px;
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  padding: 2rem;
  background-color: #fafafa;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.service-card h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: #1d1d1f;
}

.service-card p {
  font-size: 1rem;
  color: #666666;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.coming-soon {
  cursor: default;
}

/* Page content */
.page-content {
  padding: 4rem 1rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.page-content h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #1d1d1f;
}

.page-content p {
  margin-bottom: 1rem;
  color: #3a3a3a;
}

.page-content form label {
  display: block;
  margin-bottom: 1rem;
  font-weight: 500;
  color: #1d1d1f;
}

.page-content form input,
.page-content form textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #cccccc;
  border-radius: 8px;
  font-size: 1rem;
  resize: vertical;
}

.page-content form button {
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  background-color: #0071e3;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.page-content form button:hover {
  background-color: #005bb5;
}

/* Footer */
.site-footer {
  background-color: #f5f5f7;
  border-top: 1px solid #d2d2d7;
  font-size: 0.75rem;
  color: #6e6e73;
  padding: 1.5rem 0;
}

/* Footer layout styled like Apple bottom bar */
.footer-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.footer-line p {
  margin: 0;
  color: #6e6e73;
}

.region-select {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.region-select select {
  border: none;
  background: transparent;
  color: #6e6e73;
  font-size: 0.75rem;
  cursor: pointer;
  padding-right: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
  justify-content: flex-start;
}

.footer-links a {
  color: #424245;
  text-decoration: none;
  white-space: nowrap;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-links span {
  color: #6e6e73;
  margin: 0 0.25rem;
}