/*
 * Responsive layer
 *
 * This file is loaded last on purpose. It only supplies fluid sizing and
 * overflow protection at narrow widths; the existing colors, images and
 * component structure remain owned by the original styles.
 */

html {
  overflow-x: hidden;
}

body {
  min-width: 0;
  overflow-x: hidden;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

button,
input,
textarea,
select {
  max-width: 100%;
}

#results,
#countryButtons,
#matrixCalculatorPanel,
.modal-window,
.country-section,
.fb-post,
.cid-fb-post,
.categories-view,
.categories-view-inner {
  min-width: 0;
}

.site-header .header-inner,
.site-header .logo,
.site-header .actions {
  min-width: 0;
}

.site-header .logo {
  white-space: nowrap;
}

.site-header .actions {
  flex-wrap: nowrap;
}

#archiveContent,
#rejectedContent,
#rejectedInlineContainer,
#rejectedInlineMain {
  min-width: 0;
  max-width: 100%;
}

#archiveContent table,
#rejectedContent table,
#rejectedInlineContainer table,
#rejectedInlineMain table {
  max-width: 100%;
}

/*
 * Croix protection
 *
 * The outside square keeps the exact existing dimensions. Its internal
 * offsets and type sizes are scaled from that same 380px reference by
 * cross-responsive.js, so the composition stays proportional on phones,
 * tablets and desktop screens.
 */
#redCross,
#redCrossClone {
  --cross-scale: 1;
}

#redCross .termination,
#redCrossClone .termination {
  left: calc(12px * var(--cross-scale, 1));
  bottom: calc(68px * var(--cross-scale, 1));
  width: calc(140px * var(--cross-scale, 1));
  max-width: calc(140px * var(--cross-scale, 1));
  padding: calc(2px * var(--cross-scale, 1));
}

#redCross .termination .term-title,
#redCrossClone .termination .term-title {
  font-size: calc(26px * var(--cross-scale, 1));
}

#redCross .termination .term-paren,
#redCrossClone .termination .term-paren {
  font-size: calc(24px * var(--cross-scale, 1));
  margin-top: calc(4px * var(--cross-scale, 1));
}

#redCross #redCrossDate,
#redCrossClone #redCrossDate-clone {
  top: calc(6px * var(--cross-scale, 1));
  padding-left: calc(8px * var(--cross-scale, 1));
  padding-right: calc(8px * var(--cross-scale, 1));
  font-size: calc(20px * var(--cross-scale, 1));
}

#redCross .cross-numbers .num,
#redCrossClone .cross-numbers .num {
  font-size: calc(56px * var(--cross-scale, 1)) !important;
  padding-left: calc(2px * var(--cross-scale, 1));
  padding-right: calc(2px * var(--cross-scale, 1));
}

#redCross .cross-numbers .num.n1,
#redCrossClone .cross-numbers .num.n1,
#redCross .cross-numbers .num.n5,
#redCrossClone .cross-numbers .num.n5,
#redCross .cross-numbers .num.n6,
#redCrossClone .cross-numbers .num.n6 {
  transform: translate(-50%, -50%) translateY(calc(3.78px * var(--cross-scale, 1))) !important;
}

#redCross .cross-numbers .num.n2,
#redCrossClone .cross-numbers .num.n2 {
  transform: translate(-50%, -50%) translateY(calc(-10px * var(--cross-scale, 1))) !important;
}

#redCross .sunday-button,
#redCrossClone .sunday-button {
  top: calc(46px * var(--cross-scale, 1));
  left: calc(8px * var(--cross-scale, 1));
  /* Slightly stronger without changing the fixed top/left anchor: the date
     and the lower number positions therefore remain untouched. */
  padding: calc(4.5px * var(--cross-scale, 1))
             calc(10px * var(--cross-scale, 1));
  font-size: calc(13.4px * var(--cross-scale, 1));
  font-weight: 800;
  letter-spacing: .015em;
  line-height: 1.15;
}

#redCross .black-square-btn,
#redCrossClone .black-square-btn {
  right: calc(12px * var(--cross-scale, 1));
  width: calc(88px * var(--cross-scale, 1));
  height: calc(88px * var(--cross-scale, 1));
}

#redCross .black-square-btn svg,
#redCrossClone .black-square-btn svg {
  width: calc(104px * var(--cross-scale, 1)) !important;
  height: calc(104px * var(--cross-scale, 1)) !important;
}

#redCross .redCrossFooter,
#redCrossClone .redCrossFooter {
  bottom: calc(10px * var(--cross-scale, 1));
  left: 50%;
  width: max-content;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  font-size: clamp(10px, calc(13px * var(--cross-scale, 1)), 30px);
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.025em;
  overflow: visible;
  text-overflow: clip;
  text-align: center;
  box-sizing: border-box;
  /* Keep the complete message on one line even when the Croix is reduced
     inside the compact mobile feed card. */
  transform: translateX(-50%) scaleX(clamp(0.55, var(--cross-scale, 1), 1));
}

#redCross #redCrossCopyImageBtn {
  right: calc(96px * var(--cross-scale, 1)) !important;
}

@media (max-width: 700px) {
  .site-header .header-inner {
    width: 100%;
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
  }

  .site-header .logo {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .site-header .actions {
    flex: 0 1 auto;
    gap: 5px !important;
    margin-left: auto;
  }

  .site-header .actions .top-action-btn {
    flex: 0 1 auto;
    min-width: 0 !important;
    margin-left: 0 !important;
    white-space: nowrap;
  }

  /* Make every category reachable on phones instead of shrinking labels
     until they overlap. Desktop spacing remains unchanged. */
  .category-bar .inner {
    justify-content: flex-start !important;
    gap: 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-left: max(8px, env(safe-area-inset-left)) !important;
    padding-right: max(8px, env(safe-area-inset-right)) !important;
  }

  .category-bar .inner .category-item {
    flex: 0 0 auto !important;
    width: fit-content !important;
    min-width: max-content !important;
  }

  #results {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    overflow-wrap: anywhere;
  }

  .results-container {
    width: 100%;
    min-width: 0;
  }

  .country-section,
  #archiveContent .country-section {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .matrix,
  .keyboard,
  .cerveau,
  .matrix-keyboard-container > * {
    min-width: 0;
    max-width: 100%;
  }

  #countryButtons {
    width: 100%;
    max-width: 100%;
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
  }

  .modal-overlay {
    padding: max(10px, env(safe-area-inset-top))
             max(10px, env(safe-area-inset-right))
             max(10px, env(safe-area-inset-bottom))
             max(10px, env(safe-area-inset-left));
  }

  .modal-window {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 20px);
  }

  .modal-header {
    gap: 8px;
  }

  .modal-title {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .modal-body {
    min-width: 0;
    overflow-x: auto;
  }
}

@media (max-width: 420px) {
  .site-header .logo {
    font-size: 16px;
    letter-spacing: -0.6px;
  }

  .site-header .actions .top-action-btn {
    padding-left: 5px !important;
    padding-right: 5px !important;
    font-size: 12px !important;
  }

  #matrixCalculatorPanel [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  #matrixCalculatorPanel [style*="min-width"] {
    min-width: 0 !important;
  }

  .copy-button,
  #showArchiveButton {
    max-width: 100%;
  }
}

@media (max-width: 340px) {
  .site-header .header-inner {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  .site-header .logo {
    font-size: 14px;
  }

  .site-header .actions {
    gap: 2px !important;
  }

  .site-header .actions .top-action-btn {
    font-size: 11px !important;
  }

}

@media (max-width: 260px) {
  /* Keep the two header actions usable on exceptionally narrow screens. */
  #shareBtn > span:first-child {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .category-bar .inner {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}