/* ==========================================================================
   RIVAL Shoes - Simple Pages (Legal, 404, Locations)
   ========================================================================== */

/* ==========================================================================
   SHARED UTILITIES
   ========================================================================== */

/* ---- Narrow Container ---- */

.container--narrow {
  max-width: 800px;
}

/* ==========================================================================
   LEGAL PAGES (Privacy Policy, Terms, Cookie Policy)
   ========================================================================== */

/* ---- Hero (minimal variant - text only, no background image) ---- */

.hero--minimal {
  background: var(--color-off-white);
  padding: var(--space-xl) 0 var(--space-lg);
  text-align: center;
}

.hero--minimal .hero__content {
  max-width: 700px;
  margin: 0 auto;
}

.hero--minimal .hero__title {
  margin-bottom: 0;
}

/* ---- Legal Section ---- */

.section--legal {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-xl);
}

/* ---- Legal Content Wrapper ---- */

.legal-content {
  max-width: 800px;
  margin: 0 auto;
}

/* ---- Legal Content Sections ---- */

.legal-content__section {
  margin-bottom: var(--space-lg);
}

.legal-content__section:last-child {
  margin-bottom: 0;
}

/* ---- Legal Content Headings ---- */

.legal-content__heading {
  font-size: 1.5rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-gray-100);
  color: var(--color-gray-600);
}

/* ---- Legal Content Text ---- */

.legal-content__text {
  color: var(--color-gray-400);
  line-height: 1.8;
  font-weight: var(--fw-light);
}

.legal-content__text p {
  margin-bottom: var(--space-sm);
  color: var(--color-gray-400);
  line-height: 1.8;
  font-weight: var(--fw-light);
}

.legal-content__text p:last-child {
  margin-bottom: 0;
}

/* ---- Typography Within Legal Content (for content_html rendering) ---- */

.legal-content h1 {
  margin-bottom: var(--space-md);
}

.legal-content h2 {
  font-size: 1.5rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-gray-100);
  color: var(--color-gray-600);
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content h3 {
  font-size: 1.2rem;
  font-weight: var(--fw-semibold);
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
  color: var(--color-gray-500);
}

.legal-content p {
  margin-bottom: var(--space-sm);
  color: var(--color-gray-400);
  line-height: 1.8;
  font-weight: var(--fw-light);
}

/* ---- Lists ---- */

.legal-content ul,
.legal-content ol {
  padding-left: var(--space-md);
  margin-bottom: var(--space-sm);
}

.legal-content ul {
  list-style: none;
}

.legal-content ul li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.5rem;
  color: var(--color-gray-400);
  line-height: 1.7;
  font-weight: var(--fw-light);
}

.legal-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 1px;
  background: var(--color-accent);
}

.legal-content ol {
  list-style: decimal;
}

.legal-content ol li {
  margin-bottom: 0.5rem;
  color: var(--color-gray-400);
  line-height: 1.7;
  font-weight: var(--fw-light);
  padding-left: 0.25rem;
}

/* ---- Links ---- */

.legal-content a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--duration-fast) var(--ease-out);
}

.legal-content a:hover {
  color: var(--color-accent-hover);
}

/* ---- Tables ---- */

.legal-content table {
  width: 100%;
  margin-bottom: var(--space-md);
  border: 1px solid var(--color-gray-100);
  border-collapse: collapse;
}

.legal-content th,
.legal-content td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-gray-100);
  font-size: 0.9rem;
  color: var(--color-gray-400);
}

.legal-content th {
  background: var(--color-off-white);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
  color: var(--color-gray-500);
}

/* ==========================================================================
   404 ERROR PAGE
   ========================================================================== */

.section--404 {
  padding: var(--space-2xl) 0;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  max-width: 560px;
  margin: 0 auto;
}

.error-page__code {
  display: block;
  font-family: var(--font-primary);
  font-size: 8rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--color-gray-100);
  user-select: none;
}

.error-page__title {
  font-size: 2rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-gray-600);
  margin: 0;
}

.error-page__message {
  font-size: 1.05rem;
  font-weight: var(--fw-light);
  color: var(--color-gray-400);
  line-height: 1.7;
  text-align: center;
  max-width: 440px;
  margin: 0;
}

.error-page__button {
  margin-top: var(--space-sm);
}

/* ==========================================================================
   LOCATIONS PAGE
   ========================================================================== */

/* ---- Map Section ---- */

.section--map {
  padding-bottom: var(--space-lg);
  background: var(--color-off-white);
}

.locations-map {
  max-width: 960px;
  margin: 0 auto;
  overflow: hidden;
}

.locations-map__image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* ---- Locations Grid Section ---- */

.section--locations {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.locations-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

/* ---- Location Card ---- */

.location-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  padding: var(--space-md);
  text-align: center;
  transition: all var(--duration-normal) var(--ease-out);
}

.location-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.location-card__flag {
  width: 48px;
  height: 36px;
  margin: 0 auto var(--space-sm);
  overflow: hidden;
  border-radius: 2px;
  box-shadow: var(--shadow-sm);
}

.location-card__flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.location-card__city {
  font-size: 1.15rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gray-600);
  margin-bottom: var(--space-xs);
}

.location-card__country {
  display: block;
  font-size: 0.8rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.location-card__address {
  font-size: 0.9rem;
  font-weight: var(--fw-light);
  color: var(--color-gray-400);
  line-height: 1.6;
  margin-bottom: var(--space-xs);
}

.location-card__phone {
  font-size: 0.85rem;
  font-weight: var(--fw-light);
  color: var(--color-gray-400);
  margin: 0;
}

.location-card__phone a {
  color: var(--color-gray-400);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.location-card__phone a:hover {
  color: var(--color-accent);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {

  /* Locations grid: 3 columns on medium screens */
  .locations-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {

  /* ---- Legal ---- */

  .hero--minimal {
    padding: var(--space-lg) 0 var(--space-md);
  }

  .section--legal {
    padding-top: var(--space-md);
    padding-bottom: var(--space-lg);
  }

  .legal-content__heading {
    font-size: 1.3rem;
  }

  .legal-content__section {
    margin-bottom: var(--space-md);
  }

  .legal-content h2 {
    font-size: 1.3rem;
  }

  .legal-content table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* ---- 404 ---- */

  .section--404 {
    min-height: 50vh;
    padding: var(--space-xl) 0;
  }

  .error-page__code {
    font-size: 5rem;
  }

  .error-page__title {
    font-size: 1.5rem;
  }

  .error-page__message {
    font-size: 0.95rem;
  }

  /* ---- Locations ---- */

  .locations-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  .location-card {
    padding: var(--space-sm) var(--space-sm) var(--space-md);
  }
}

@media (max-width: 480px) {

  /* ---- 404 ---- */

  .error-page__code {
    font-size: 4rem;
  }

  .error-page__title {
    font-size: 1.25rem;
    letter-spacing: 0.08em;
  }

  /* ---- Locations ---- */

  .locations-grid {
    grid-template-columns: 1fr;
  }
}