@font-face {
  font-family: "Highway Gothic";
  src: url("../fonts/HWYGOTH.734e5a726f37.TTF") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Highway Gothic Narrow";
  src: url("../fonts/HWYGNRRW.f1d461b4bad8.TTF") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Highway Gothic Condensed";
  src: url("../fonts/HWYGCOND.38a11945c3c2.TTF") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Highway Gothic Expanded";
  src: url("../fonts/HWYGEXPD.95e6d01f6aab.TTF") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Highway Gothic Wide";
  src: url("../fonts/HWYGWDE.6faedb70a3dc.TTF") format("truetype");
  font-weight: normal;
  font-style: normal;
}

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

html {
  height: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Highway Gothic", "Arial Narrow", Arial, sans-serif;
}

.sign-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
}

@media (max-width: 480px) {
  .sign-container {
    position: relative;
  }
}

.sign {
  width: 864px;
  height: 1296px;
  max-width: 864px;
  max-height: 1296px;
  aspect-ratio: 864 / 1296;
  background-color: white;
  background-image:
    repeating-linear-gradient(
      60deg,
      transparent,
      transparent 8px,
      rgba(220, 220, 220, 0.4) 8px,
      rgba(220, 220, 220, 0.4) 8.5px,
      transparent 8.5px,
      transparent 16px,
      rgba(200, 200, 200, 0.3) 16px,
      rgba(200, 200, 200, 0.3) 16.5px
    ),
    repeating-linear-gradient(
      -60deg,
      transparent,
      transparent 8px,
      rgba(220, 220, 220, 0.4) 8px,
      rgba(220, 220, 220, 0.4) 8.5px,
      transparent 8.5px,
      transparent 16px,
      rgba(200, 200, 200, 0.3) 16px,
      rgba(200, 200, 200, 0.3) 16.5px
    );
  background-repeat: repeat, repeat;
  border-radius: 108px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  position: relative;
  transform-origin: center center;
  overflow: hidden; /* Contain h1 within sign borders */
  flex-shrink: 0;
  transform: scale(0.5); /* Start scaled down */
  opacity: 0; /* Hide initially to prevent flash */
  transition: opacity 0.2s ease;
}

.sign::before {
  content: "";
  position: absolute;
  top: 27px;
  left: 27px;
  right: 27px;
  bottom: 27px;
  background-color: transparent;
  border: 31.5px solid #231f20; /* Half of 63px (distance from 27px to 58.5px) */
  border-radius: 81px;
  pointer-events: none;
}

/* Red color scheme */
.sign.red {
  background-color: white;
}
.sign.red::before {
  border-color: #cc0000;
}
.sign.red .sign-content {
  color: #cc0000;
}
.sign.red .h1-container {
  background-color: #cc0000;
}
.sign.red .mounting-hole {
  border: none;
  background-color: #f0f0f0;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
}
.sign.red .sign-footer {
  color: #cc0000;
}

/* Blue color scheme */
.sign.blue {
  background-color: white;
}
.sign.blue::before {
  border-color: #003f87;
}
.sign.blue .sign-content {
  color: #003f87;
}
.sign.blue .h1-container {
  background-color: #003f87;
}
.sign.blue .mounting-hole {
  border: none;
  background-color: #f0f0f0;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
}
.sign.blue .sign-footer {
  color: #003f87;
}

/* Black color scheme (default) */
.sign.black {
  background-color: white;
}
.sign.black::before {
  border-color: #231f20;
}
.sign.black .sign-content {
  color: #231f20;
}
.sign.black .h1-container {
  background-color: #231f20;
}
.sign.black .mounting-hole {
  border: none;
  background-color: #f0f0f0;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
}
.sign.black .sign-footer {
  color: #231f20;
}

/* Yellow color scheme */
.sign.yellow {
  background-color: #ffd500;
  background-image:
    repeating-linear-gradient(
      60deg,
      transparent,
      transparent 8px,
      rgba(120, 120, 120, 0.25) 8px,
      rgba(120, 120, 120, 0.25) 8.5px,
      transparent 8.5px,
      transparent 16px,
      rgba(100, 100, 100, 0.2) 16px,
      rgba(100, 100, 100, 0.2) 16.5px
    ),
    repeating-linear-gradient(
      -60deg,
      transparent,
      transparent 8px,
      rgba(120, 120, 120, 0.25) 8px,
      rgba(120, 120, 120, 0.25) 8.5px,
      transparent 8.5px,
      transparent 16px,
      rgba(100, 100, 100, 0.2) 16px,
      rgba(100, 100, 100, 0.2) 16.5px
    );
}
.sign.yellow::before {
  border-color: #231f20;
}
.sign.yellow .sign-content {
  color: #231f20;
}
.sign.yellow .h1-container {
  background-color: #231f20;
}
.sign.yellow h1 {
  color: white; /* White text needed for multiply knockout effect */
}
.sign.yellow .mounting-hole {
  border: none;
  background-color: #f0f0f0;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
}
.sign.yellow .sign-footer {
  color: #231f20;
}

.sign-content {
  text-align: center;
  color: black;
  padding: 20px;
  padding-bottom: 40px; /* Extra space for scroll indicator */
  position: absolute;
  z-index: 2; /* Above ::before and ::after */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  scroll-behavior: smooth;
  touch-action: pan-y; /* Only allow vertical scrolling */
  overscroll-behavior: contain; /* Prevent scroll chaining */
}

/* Custom scrollbar for sign-content */
.sign-content::-webkit-scrollbar {
  width: 8px;
}

.sign-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.sign-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

/* Scroll indicators */
.scroll-indicator-bottom {
  position: absolute;
  bottom: 20px;
  right: 0;
  font-size: 24px;
  color: rgba(0, 0, 0, 0.4);
  animation: bounce-down 2s infinite;
  pointer-events: none;
  display: none;
  z-index: 10;
}

.scroll-indicator-top {
  position: sticky;
  top: 0;
  right: 0;
  width: 100%;
  text-align: right;
  font-size: 24px;
  color: rgba(0, 0, 0, 0.4);
  animation: bounce-up 2s infinite;
  pointer-events: none;
  display: none;
  z-index: 10;
}

@keyframes bounce-down {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
}

@keyframes bounce-up {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Show bottom indicator when overflow exists and at top */
.sign-content.has-overflow:not(.scrolled-down) .scroll-indicator-bottom {
  display: block;
}

/* Show top indicator when scrolled down */
.sign-content.has-overflow.scrolled-down .scroll-indicator-top {
  display: block;
}

.h1-container {
  position: absolute;
  top: 58px; /* Slightly overlap with border to eliminate gap */
  left: 58px;
  right: 58px;
  background-color: #231f20;
  z-index: 2; /* Above ::before and ::after */
  /* Match inner area radius */
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  padding: 80px 20px 20px 20px; /* Reduced top padding for less margin above text */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  mix-blend-mode: multiply; /* Back to container for proper knockout */
}

h1 {
  font-family: "Highway Gothic", "Arial Narrow", Arial, sans-serif;
  font-size: 80px; /* Default size, will be scaled by JavaScript */
  font-weight: normal;
  opacity: 0; /* Hide initially to prevent flash */
  transition: opacity 0.1s ease;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1; /* Tight line height */
  /* Override ALL margin properties */
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  /* White text for knockout with container's multiply */
  color: white;
  /* Fit text */
  text-align: center;
  white-space: nowrap;
}

h2.subtitle,
.subtitle {
  font-family: "Highway Gothic", "Arial Narrow", Arial, sans-serif;
  font-size: 100px;
  font-weight: normal;
  letter-spacing: 0.05em;
  line-height: 1;
  margin: 0;
  margin-bottom: 20px; /* Match the spacing between h1 and sign-content */
  text-transform: uppercase;
  opacity: 0; /* Hide initially to prevent flash */
  transition: opacity 0.1s ease;
  white-space: nowrap; /* Keep on one line since we're scaling to fit */
}

p.sub-text,
.sub-text {
  font-family: "Highway Gothic", "Arial Narrow", Arial, sans-serif;
  font-size: 45px;
  font-weight: normal;
  letter-spacing: 0.1em;
  margin: 0;
  margin-bottom: 15px;
  text-transform: uppercase;
  line-height: 1.1;
}

/* Remove margin from last p element in sign-content */
.sign-content > p:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Watermark in border area */
.watermark {
  position: absolute;
  left: 216px; /* Quarter way from left (864/4) - centered between left edge (0) and center (432) */
  bottom: 5px; /* Moved down to avoid border collision */
  transform: translateX(-50%);
  font-family: "Highway Gothic", "Arial Narrow", Arial, sans-serif;
  font-size: 18px; /* Increased to nearly fill the 27px border height */
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: black !important; /* Black text */
  z-index: 3;
  white-space: nowrap;
}

/* Links inherit color from their context */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

a:hover {
  opacity: 0.7;
}

a:visited {
  color: inherit;
}

.mounting-hole {
  position: absolute;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  border: 1px solid #231f20;
  background-color: #f0f0f0; /* Match page background */
  z-index: 3; /* Above everything */
}

.mounting-hole.top {
  top: 108px;
  left: 432px;
}

.mounting-hole.bottom {
  top: 1188px;
  left: 432px;
}

/* Footer section */
.sign-footer {
  position: absolute;
  top: 1201.5px; /* Center of mounting hole: 1188px + 13.5px (half of 27px hole) */
  left: 58.5px; /* Inner border edge */
  right: 58.5px; /* Inner border edge */
  height: 27px; /* Same height as mounting hole for vertical centering */
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2; /* Same level as sign content */
  transform: translateY(-50%); /* Center vertically with the hole */
}

.footer-left,
.footer-right {
  font-family: "Highway Gothic", "Arial Narrow", Arial, sans-serif;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: inherit; /* Inherit color from parent's color scheme */
  display: flex;
  align-items: center;
  height: 100%;
}

.footer-left p,
.footer-right p {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}

.footer-left {
  flex: 0 1 auto;
  width: calc(432px - 58.5px - 27px); /* Space from border to hole edge */
  padding-left: 31.5px; /* Center in the space (border width) */
  padding-right: 20px; /* Spacing from hole */
  justify-content: center;
}

.footer-right {
  flex: 0 1 auto;
  width: calc(432px - 58.5px - 27px); /* Space from hole edge to border */
  padding-left: 20px; /* Spacing from hole */
  padding-right: 31.5px; /* Center in the space (border width) */
  justify-content: flex-end; /* Align content to the right */
  text-align: right; /* Right-align text */
}

/* When only footer-right has content, it still stays on the right */
.footer-left:empty {
  display: none;
}

/* When only footer-left has content, move it to the right */
.footer-left:not(:empty) ~ .footer-right:empty {
  display: none;
}

.footer-left:not(:empty):only-child,
.sign-footer > .footer-right:first-child:last-child {
  margin-left: auto; /* Push to the right when alone */
}

/* Development controls */
#dev-controls {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.1);
  padding: 10px 20px;
  border-radius: 20px;
  display: flex;
  gap: 20px;
  align-items: center;
  font-family: "Highway Gothic", "Arial Narrow", Arial, sans-serif;
  font-size: 14px;
  z-index: 1000;
  backdrop-filter: blur(5px);
}

#dev-controls label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #333;
  cursor: pointer;
  user-select: none;
}

#dev-controls input[type="checkbox"] {
  cursor: pointer;
}

.color-buttons {
  display: flex;
  gap: 8px;
}

.color-buttons button {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  transition: all 0.2s ease;
}

.color-buttons button:hover {
  background: rgba(255, 255, 255, 1);
  transform: translateY(-1px);
}

.color-buttons button[data-color="red"] {
  color: #cc0000;
}

.color-buttons button[data-color="blue"] {
  color: #003f87;
}

.color-buttons button[data-color="black"] {
  color: #231f20;
}

.color-buttons button[data-color="yellow"] {
  background: #ffd500;
  color: #231f20;
}

.color-buttons button[data-color="random"] {
  background: linear-gradient(90deg, #cc0000, #003f87, #ffd500);
  color: white;
}

/* Mobile optimizations */
@media (max-width: 480px) {
  body {
    padding: 0;
  }

  #dev-controls {
    bottom: 10px;
    padding: 8px 15px;
    font-size: 12px;
  }

  .color-buttons button {
    padding: 4px 8px;
    font-size: 11px;
  }
}