/* Styles of the prototype's pages still on templates/legacy/base.html.
   Fonts and colors come from main.css. */

/* === ACCENT DIVIDERS WITH SUBTLE DOT === */
.divider-dot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 3rem 0;
}
.divider-dot::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: var(--line);
}
.divider-dot::after {
  content: '';
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--gold);
  z-index: 1;
}

/* === SMOOTH TRANSITIONS === */
.transition-smooth {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* === SUBTLE GRAIN EFFECT ON HERO === */
.bg-grain {
  background-image: radial-gradient(rgba(58, 46, 37, 0.04) 1px, transparent 0);
  background-size: 24px 24px;
}

/* === WATERMARK CANVAS FOR VIDEO === */
.watermark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 20;
}
.floating-watermark {
  position: absolute;
  color: rgba(255, 255, 255, 0.28);
  font-size: 13px;
  font-family: monospace;
  font-weight: 500;
  user-select: none;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  transform: rotate(-15deg);
  animation: moveWatermark 25s linear infinite alternate;
}

@keyframes moveWatermark {
  0% { transform: translate(5%, 10%) rotate(-12deg); }
  50% { transform: translate(50%, 65%) rotate(-8deg); }
  100% { transform: translate(25%, 35%) rotate(-15deg); }
}

/* === ACCESSIBILITY HIGH-CONTRAST MODE === */
body.a11y-high-contrast {
  background-color: #000000 !important;
  color: #FFFFFF !important;
}
body.a11y-high-contrast .bg-surface,
body.a11y-high-contrast .bg-\[\#FFFFFF\],
body.a11y-high-contrast .bg-cream,
body.a11y-high-contrast .bg-\[\#FDF8F0\] {
  background-color: #121212 !important;
  color: #FFFFFF !important;
  border-color: #FFFF00 !important;
}
body.a11y-high-contrast a,
body.a11y-high-contrast button {
  color: #FFFF00 !important;
  border-color: #FFFF00 !important;
}
body.a11y-large-text {
  font-size: 120% !important;
}
body.a11y-underline-links a {
  text-decoration: underline !important;
}
body.a11y-stop-anim * {
  animation: none !important;
  transition: none !important;
}

/* === ANNOTATION CANVAS ON HOMEWORK PHOTOS === */
.annotation-box {
  position: absolute;
  border: 2px solid #C8A97E;
  background-color: rgba(200, 169, 126, 0.2);
  pointer-events: auto;
  cursor: pointer;
  transition: all 0.2s ease;
}
.annotation-box:hover {
  background-color: rgba(200, 169, 126, 0.4);
  border-color: #B85D43;
}
.annotation-pin {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #B85D43;
  border: 2px solid #FFFFFF;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.annotation-tooltip {
  visibility: hidden;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background-color: #3A2E25;
  color: #FFFFFF;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 30;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.annotation-box:hover .annotation-tooltip,
.annotation-pin:hover .annotation-tooltip {
  visibility: visible;
}

/* === DIPLOMA CARD PRINT STYLES === */
@media print {
  header, footer, .no-print {
    display: none !important;
  }
  .diploma-certificate {
    box-shadow: none !important;
    border: 8px double #C8A97E !important;
    page-break-inside: avoid;
    width: 100% !important;
    max-width: 100% !important;
  }
}