/* ============================================================
   ugly.css — THE UGLY WEBSITE™ GLOBAL STYLESHEET
   Loaded AFTER global.css so it wins. On purpose. All of it.
   ============================================================ */

/* ── 1. FONT CRIMES ───────────────────────────────────────── */
html, body, p, span, div, li, td, th, label, input, select, textarea, button, a {
  font-family: "Comic Sans MS", "Comic Neue", "Chalkboard SE", cursive, sans-serif !important;
}
h1, h2, h3, .rte h1, .rte h2, .rte h3 {
  font-family: Impact, "Haettenschweiler", "Arial Black", sans-serif !important;
  letter-spacing: 0.06em !important;
  word-spacing: 0.4em !important;
  line-height: 0.92 !important;
  text-transform: uppercase !important;
  text-shadow: 3px 3px 0 #00ff00, 6px 6px 0 #ff00ff, -2px -2px 0 #ffff00 !important;
}
h4, h5, h6, .rte h4, .rte h5, .rte h6 {
  font-family: Papyrus, "Bradley Hand", fantasy !important;
  letter-spacing: 0.18em !important;
}
p, .rte p, li {
  text-align: justify !important;
  line-height: 1.05 !important;
  letter-spacing: 0.03em !important;
}
p::first-letter { font-family: Papyrus, fantasy !important; font-size: 2.4em; color: #ff0000; }

/* ── 2. BACKGROUND: A TILED NIGHTMARE ─────────────────────── */
body {
  background-color: #1b8f3a !important;
  background-image:
    repeating-linear-gradient(45deg,  rgba(255,0,255,.55) 0 14px, rgba(255,255,0,.55) 14px 28px),
    repeating-linear-gradient(-45deg, rgba(0,255,255,.35) 0 22px, rgba(255,0,0,.35) 22px 44px) !important;
  background-attachment: fixed, scroll !important;
  background-size: 56px 56px, 88px 88px !important;
  color: #003300 !important;
  cursor: crosshair !important;
  word-break: break-word;
}

/* Everything gets a bevel and a border. Everything. */
section, .section, footer, header, nav, aside, article {
  border: 5px ridge #ff00ff !important;
  outline: 3px dotted #00ffff !important;
  outline-offset: -9px;
  margin: 6px 0 !important;
  box-shadow: inset 0 0 40px rgba(255,0,0,.35), 8px 8px 0 #000 !important;
}
section:nth-of-type(even), .section:nth-of-type(even) {
  border-color: #ffff00 !important;
  transform: rotate(-0.45deg);
}
section:nth-of-type(3n), .section:nth-of-type(3n) { transform: rotate(0.6deg); }

/* ── 3. LINKS + BUTTONS: WINDOWS 95, BUT WORSE ────────────── */
a { color: #0000ee !important; text-decoration: underline wavy #ff0000 !important; cursor: progress !important; }
a:visited { color: #660099 !important; }
a:hover {
  color: #ff0000 !important;
  font-size: 1.22em !important;   /* layout shift on hover: chef's kiss */
  font-style: italic !important;
  background: #ffff00 !important;
  letter-spacing: 0.2em !important;
}
button, .btn, input[type="submit"], [role="button"] {
  font-family: "Comic Sans MS", cursive !important;
  font-weight: 700 !important;
  color: #000 !important;
  background: linear-gradient(#f0f0f0 0%, #c0c0c0 45%, #8f8f8f 100%) !important;
  border: 4px outset #dcdcdc !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 #000 !important;
  cursor: help !important;
  text-shadow: 1px 1px 0 #fff;
  padding: 10px 18px !important;
}
button:hover, .btn:hover { background: linear-gradient(#ff00ff, #00ff00) !important; border-style: inset !important; }
button:active, .btn:active { transform: translate(4px, 4px); box-shadow: none !important; }

/* ── 4. ANIMATION: THE BLINK TAG LIVES AGAIN ──────────────── */
@keyframes ugly-blink   { 0%,49% { opacity: 1 } 50%,100% { opacity: 0 } }
@keyframes ugly-rainbow { 0% { filter: hue-rotate(0deg) } 100% { filter: hue-rotate(360deg) } }
@keyframes ugly-shake   { 0%,100% { transform: translate(0,0) rotate(0) } 25% { transform: translate(-3px,2px) rotate(-2deg) } 75% { transform: translate(3px,-2px) rotate(2deg) } }
@keyframes ugly-spin    { to { transform: rotate(360deg) } }
@keyframes ugly-scroll  { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes ugly-throb   { 0%,100% { transform: scale(1) } 50% { transform: scale(1.18) } }

.ugly-blink   { animation: ugly-blink 0.7s steps(1) infinite; }
.ugly-rainbow { animation: ugly-rainbow 2.5s linear infinite; }
.ugly-shake   { animation: ugly-shake 0.35s linear infinite; }
.ugly-spin    { display: inline-block; animation: ugly-spin 1.6s linear infinite; }
.ugly-throb   { animation: ugly-throb 1.1s ease-in-out infinite; }

/* ── 5. WORDART ───────────────────────────────────────────── */
.ugly-wordart {
  font-family: Impact, "Arial Black", sans-serif !important;
  font-size: clamp(38px, 9vw, 120px) !important;
  line-height: .9 !important;
  text-transform: uppercase !important;
  background: linear-gradient(#fff700 0%, #ff8c00 38%, #ff0000 62%, #6a00ff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 3px #000;
  paint-order: stroke fill;
  filter: drop-shadow(6px 6px 0 #00ffff) drop-shadow(-4px -4px 0 #ff00ff);
  transform: skewY(-4deg) scaleY(1.35);
  text-shadow: none !important;
  margin: 24px 0 18px !important;
}

/* ── 6. THE MARQUEE ──────────────────────────────────────── */
.ugly-marquee { overflow: hidden; white-space: nowrap; border-top: 4px double #000; border-bottom: 4px double #000; background: #000; }
.ugly-marquee__track { display: inline-flex; gap: 60px; animation: ugly-scroll linear infinite; will-change: transform; }
.ugly-marquee__item { color: #00ff00; font-weight: 700; font-size: 20px; padding: 8px 0; text-shadow: 2px 2px 0 #ff00ff; }

/* ── 7. FORM ELEMENTS THAT HATE YOU ──────────────────────── */
input, select, textarea {
  border: 3px inset #808080 !important;
  background: #ffffcc !important;
  color: #000 !important;
  border-radius: 0 !important;
  font-size: 11px !important;
  padding: 6px !important;
}
input:focus, select:focus, textarea:focus {
  outline: 4px dashed #ff0000 !important;
  background: #ffe4ff !important;
  transform: rotate(-1.2deg);
}
label { font-weight: 700 !important; color: #b30000 !important; font-size: 12px !important; }
::placeholder { color: #999 !important; font-style: italic; }

/* ── 8. SCROLLBAR + SELECTION ────────────────────────────── */
::selection { background: #ff00ff; color: #00ff00; }
::-webkit-scrollbar { width: 26px; }
::-webkit-scrollbar-track { background: repeating-linear-gradient(45deg, #ff0 0 8px, #0ff 8px 16px); }
::-webkit-scrollbar-thumb { background: #ff00ff; border: 4px outset #fff; }

/* ── 9. TABLES, HRs, MISC ARTIFACTS ──────────────────────── */
hr { height: 10px !important; border: 0 !important; background: repeating-linear-gradient(90deg, #f00 0 12px, #00f 12px 24px) !important; }
table { border: 4px ridge #00ff00 !important; background: #ffffcc !important; }
td, th { border: 2px dotted #ff00ff !important; padding: 6px !important; font-size: 12px !important; }
img { border: 4px groove #ffff00 !important; }

/* ── 10. UTILITY BOXES USED BY THE UGLY SECTIONS ─────────── */
.ugly-box { background: #ffffcc; border: 5px ridge #808080; padding: 14px; box-shadow: 6px 6px 0 #000; }
.ugly-alert { background: #ff0; border: 4px dashed #f00; padding: 10px; font-weight: 700; color: #b30000; }
.ugly-construction {
  background: repeating-linear-gradient(45deg, #ffcc00 0 20px, #000 20px 40px);
  color: #fff; font-weight: 700; text-align: center; padding: 10px;
  border: 4px solid #000; text-shadow: 2px 2px 0 #000; letter-spacing: .2em;
}
.ugly-counter {
  display: inline-flex; gap: 3px; padding: 6px; background: #000; border: 3px inset #666;
}
.ugly-counter span {
  font-family: "Courier New", monospace !important; font-size: 26px; font-weight: 700;
  color: #00ff00; background: #111; padding: 2px 6px; border: 1px solid #333;
}
.ugly-modal-backdrop {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(255,0,255,.45);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.ugly-modal {
  background: #ffffcc; border: 8px ridge #ff0000; box-shadow: 14px 14px 0 #000;
  max-width: 520px; width: 100%; padding: 18px; position: relative;
  max-height: 88vh; overflow: auto;
}
.ugly-modal__title { background: #000080; color: #fff !important; font-family: "Comic Sans MS", cursive !important;
  margin: -18px -18px 14px; padding: 8px 12px; font-size: 15px; font-weight: 700; text-shadow: none !important; }
.ugly-modal__close { position: absolute; top: 6px; right: 8px; font-size: 11px !important; padding: 2px 7px !important; }
.ugly-dodge { position: relative; transition: transform .09s linear; }

/* ── 10b. THE NAVBAR AND FOOTER DO NOT GET TO BE TASTEFUL ── */
header.nav, .site-footer {
  background: repeating-linear-gradient(90deg, #c0c0c0 0 18px, #a8a8a8 18px 36px) !important;
  border-top: 6px ridge #ff00ff !important;
  border-bottom: 6px ridge #00ffff !important;
  box-shadow: inset 0 0 30px rgba(255,0,0,.4) !important;
}
header.nav .nav__container, .site-footer * {
  font-family: "Comic Sans MS", cursive !important;
}
header.nav a, header.nav .nav__menu a {
  color: #0000ee !important; text-decoration: underline wavy #ff0000 !important;
  font-weight: 700 !important; font-size: 13px !important;
}
header.nav a:hover { background: #ffff00 !important; color: #ff0000 !important; }
.site-logo__text {
  font-family: Impact, sans-serif !important; letter-spacing: .05em;
  color: #b30000 !important; text-shadow: 2px 2px 0 #00ff00 !important; text-transform: uppercase;
}
header.nav .nav__btn, header.nav .cart-btn {
  border-radius: 0 !important; border: 4px outset #dcdcdc !important;
  background: linear-gradient(#f0f0f0, #9a9a9a) !important; color: #000 !important;
}
header.nav .cart-count { border: 2px solid #000 !important; background: #ff0000 !important; color: #ffff00 !important; }

.site-footer {
  background: #000066 !important;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,0,.10) 0 12px, rgba(255,0,255,.10) 12px 24px) !important;
}
.site-footer, .site-footer p, .site-footer li, .site-footer span, .site-footer h2, .site-footer h3, .site-footer h4 {
  color: #ffff00 !important; text-shadow: none !important;
}
.site-footer h2, .site-footer h3, .site-footer h4 { font-family: Impact, sans-serif !important; color: #00ffff !important; }
.site-footer a { color: #66ff66 !important; }
.site-footer a:hover { background: #ff00ff !important; color: #ffff00 !important; }
.site-footer input { border: 3px inset #808080 !important; }

/* ── 11. RESPONSIVE? SORT OF. ────────────────────────────── */
@media (max-width: 767px) {
  body { background-size: 30px 30px, 48px 48px !important; }
  .ugly-wordart { -webkit-text-stroke: 2px #000; }
  section, .section { transform: none !important; }
}

/* ── 12. ONE ACT OF MERCY: respect reduced-motion ─────────── */
@media (prefers-reduced-motion: reduce) {
  .ugly-blink, .ugly-rainbow, .ugly-shake, .ugly-spin, .ugly-throb,
  .ugly-marquee__track { animation: none !important; }
  a:hover { font-size: inherit !important; }
}