/* ============================================================
   Cresus Paie — COMPONENTS
   Layout · Navigation · Buttons · Cards · Sections · Footer
   ============================================================ */

/* ─── 01. Layout & Container ─────────────────────────────────── */

.crx-container {
  width: min(100% - 48px, var(--container-max));
  margin-inline: auto;
}

.crx-container-narrow {
  width: min(100% - 48px, var(--container-narrow));
  margin-inline: auto;
}

@media (max-width: 768px) {
  .crx-container,
  .crx-container-narrow { width: 100%; padding-left: 24px; padding-right: 24px; }
}

/* ─── 02. Navigation ─────────────────────────────────────────── */

.crx-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  border: 0 !important;
  border-bottom: 0 !important;
  outline: 0;
  box-shadow: none !important;
}

/* Dark variant — background shape sourced from the supplied nav asset
   (Rectangle 5.png): flush top edge, rounded bottom corners only. */
.crx-nav--dark {
  background: var(--color-nav-ink);
  border-radius: 0;
  box-shadow: none !important;
  border: 0 !important;
  border-bottom: 0 !important;
}

.crx-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.crx-nav-logo { display: flex; align-items: center; }
.crx-brand-logo { width: 176px; height: auto; max-height: 40px; object-fit: contain; }
.crx-footer-brand .crx-brand-logo { width: 140px; max-height: 32px; }

.crx-nav-item { position: relative; display: flex; align-items: center; }

.crx-nav-link {
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted-dark);
}

.crx-nav--dark .crx-nav-link:hover,
.crx-nav--dark .crx-nav-link.is-active { color: var(--color-white); }

.crx-nav-submenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  padding: var(--space-xs);
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: var(--transition-smooth);
}

.crx-nav-item:hover > .crx-nav-submenu,
.crx-nav-item:focus-within > .crx-nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.crx-nav-submenu .crx-nav-item { display: block; }
.crx-nav-submenu .crx-nav-link { display: block; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); color: var(--color-text-primary); }
.crx-nav-submenu .crx-nav-link:hover,
.crx-nav-submenu .crx-nav-link.is-active { background: var(--color-nordic-breeze); }

.crx-submenu-caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 6px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: var(--transition-smooth);
}

.crx-nav-item:hover > .crx-nav-link > .crx-submenu-caret,
.crx-nav-item:focus-within > .crx-nav-link > .crx-submenu-caret { transform: rotate(180deg); }

.crx-nav-actions { display: flex; align-items: center; gap: var(--space-md); }

.crx-nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-white);
}

.crx-nav-phone-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.crx-nav-cta {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--color-duranta-yellow);
  color: var(--color-tetsu-kon-blue);
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
}

.crx-nav-cta:hover { opacity: 0.9; }

.crx-nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}

.crx-nav-hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--color-white);
  border-radius: 2px;
}

.crx-mobile-menu {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0; right: 0;
  background: var(--color-nav-ink);
  padding: var(--space-md);
  z-index: calc(var(--z-nav) - 1);
  flex-direction: column;
  gap: var(--space-sm);
  box-shadow: 0 18px 30px rgba(12, 15, 83, 0.2);
}

.crx-mobile-menu[hidden] { display: none; }
.crx-mobile-menu.is-open { display: flex; }
.crx-mobile-links { display: flex; flex-direction: column; gap: var(--space-xs); }
.crx-mobile-links > li > .crx-nav-link {
  display: block;
  padding: 0.75rem 0;
  color: var(--color-white);
  font-size: 1rem;
}
.crx-mobile-cta { margin-top: var(--space-sm); }

.crx-mobile-submenu {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-left: var(--space-md);
  margin-top: var(--space-xs);
  border-left: 1px solid var(--color-border-dark);
}

.crx-mobile-submenu .crx-nav-link { font-size: var(--size-sm); color: var(--color-text-muted-dark); }
.crx-mobile-submenu .crx-nav-link.is-active { color: var(--color-white); }

@media (max-width: 1080px) {
  .crx-nav-actions { margin-left: auto; }
  .crx-nav-phone { display: none; }
}

@media (max-width: 768px) {
  .crx-brand-logo { width: 140px; }
  .crx-nav-cta {
    height: 40px;
    padding-inline: 14px;
    font-size: 0.75rem;
  }
}

/* ─── 03. Buttons ────────────────────────────────────────────── */

.cr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 var(--space-md);
  border-radius: var(--radius-pill);
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
}

.cr-btn-primary { background: var(--color-tetsu-kon-blue); color: var(--color-white); }
.cr-btn-primary:hover { background: var(--color-tetsu-kon-blue-hover); }

.cr-btn-secondary { background: transparent; color: var(--color-tetsu-kon-blue); border: 1px solid var(--color-border-light); }
.cr-btn-secondary:hover { border-color: var(--color-tetsu-kon-blue); }

.cr-btn-accent { background: var(--color-duranta-yellow); color: var(--color-tetsu-kon-blue); }
.cr-btn-accent:hover { opacity: 0.9; }

/* ─── 04. Cards ──────────────────────────────────────────────── */

.cr-card {
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-sm);
}

.cr-card--dark { background: var(--color-tetsu-kon-blue); color: var(--color-white); border-color: var(--color-border-dark); }
.cr-card--accent { background: var(--color-duranta-yellow); color: var(--color-tetsu-kon-blue); border-color: transparent; }

.cr-card-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  margin-bottom: var(--space-sm);
  background: var(--color-nordic-breeze);
}

.cr-card-title { font-size: var(--size-h3); margin-bottom: var(--space-xs); }
.cr-card-body { font-size: var(--size-body); }

/* ─── 05. Sections ───────────────────────────────────────────── */

.crx-section { padding-block: var(--space-xl); background: var(--color-bg-main); box-shadow: none; }
.crx-section--dark {
  background: var(--color-tetsu-kon-blue) url('../images/home-dark-texture.webp') center / cover no-repeat;
  color: var(--color-white);
}
.crx-section--white { background: var(--color-white); }

/* ─── Legal page ───────────────────────────────────────────── */
.crx-legal-section { padding-block: clamp(4rem, 7vw, 7rem); }
.crx-legal-content { max-width: 820px; }
.crx-legal-content h1,
.crx-legal-content h2,
.crx-legal-content h3 { color: var(--color-tetsu-kon-blue); }
.crx-legal-content h1 { margin-bottom: var(--space-lg); }
.crx-legal-content h2 { margin-top: var(--space-xl); }
.crx-legal-content h3 { margin-top: var(--space-lg); margin-bottom: var(--space-sm); }
.crx-legal-content p { max-width: 760px; margin-bottom: var(--space-sm); }
.crx-legal-content a { color: var(--color-tetsu-kon-blue); text-decoration: underline; }
.crx-legal-details { display: grid; gap: 0.75rem; margin: var(--space-md) 0; }
.crx-legal-details div { display: grid; grid-template-columns: 10rem 1fr; gap: var(--space-sm); }
.crx-legal-details dt { font-weight: var(--weight-semibold); color: var(--color-tetsu-kon-blue); }
.crx-legal-details dd { margin: 0; color: var(--color-text-muted); }

@media (max-width: 768px) {
  .crx-section { padding-block: var(--space-lg); }
  .crx-legal-details div { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* ─── 06. Footer ─────────────────────────────────────────────── */

.crx-footer {
  background: var(--color-nav-ink);
  color: var(--color-white);
  padding: var(--space-xl) 0 var(--space-md);
}

.crx-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(12rem, 1fr);
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.crx-footer-brand p { font-size: var(--size-sm); color: var(--color-text-muted-dark); margin-top: var(--space-sm); max-width: 280px; }

.crx-footer-social { margin-top: var(--space-md); }

.crx-footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-nav-ink);
}

.crx-footer-social-link:hover { opacity: 0.85; }

.crx-footer-col-title { font-size: var(--size-sm); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-sm); color: var(--color-duranta-yellow); }
.crx-footer-links { display: flex; flex-direction: column; gap: var(--space-xs); }
.crx-footer-link { font-size: var(--size-sm); color: var(--color-text-muted-dark); }
.crx-footer-link:hover { color: var(--color-white); }

/* Keep the contact block visually anchored to the right edge on larger screens. */
.crx-footer-grid > .crx-footer-col { justify-self: end; text-align: right; }
.crx-footer-grid > .crx-footer-col .crx-footer-links { align-items: flex-end; }

.crx-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border-dark);
}

.crx-footer-legal { display: flex; gap: var(--space-md); }
.crx-footer-meta { font-size: var(--size-sm); color: var(--color-text-muted-dark); }

@media (max-width: 900px) {
  .crx-footer-grid { grid-template-columns: 1fr 1fr; }
  .crx-footer-brand { grid-column: span 1; }
}

@media (max-width: 480px) {
  .crx-footer-grid { grid-template-columns: 1fr; }
  .crx-footer-brand { grid-column: span 1; }
  .crx-footer-grid > .crx-footer-col { justify-self: start; text-align: left; }
  .crx-footer-grid > .crx-footer-col .crx-footer-links { align-items: flex-start; }
  .crx-footer-bottom { flex-direction: column; align-items: flex-start; }
}