/* ===================================================================
   Clinical Brutalism Design System — AI Website Roaster
   Palette: Black (#111827) · White (#FFFFFF) · Red (#DC2626)
=================================================================== */

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #F3F4F6; }
::-webkit-scrollbar-thumb { background: #111827; border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: #DC2626; }

/* === TOAST CONTAINER === */
.toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  border: 2px solid #111827;
  box-shadow: 4px 4px 0px #111827;
  animation: toast-in 0.25s ease-out;
  max-width: 360px;
  border-radius: 0;
}

.toast-error {
  background: #FEE2E2;
  color: #DC2626;
  border-color: #DC2626;
  box-shadow: 4px 4px 0px #DC2626;
}

.toast-success {
  background: #D1FAE5;
  color: #065F46;
  border-color: #065F46;
  box-shadow: 4px 4px 0px #065F46;
}

.toast-out { animation: toast-out 0.25s ease-in forwards; }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(40px); }
}

/* === SECTION FADE (scroll animations) === */
.section-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.section-fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===================================================================
   MOBILE RESPONSIVENESS
   Keep Clinical Brutalism intact but fix overflow + readability at <=768px.
=================================================================== */
html, body { max-width: 100vw; }

@media (max-width: 768px) {
  body { overflow-x: hidden; }

  /* Ensure no element can bust out of the viewport */
  img, iframe, video, svg { max-width: 100%; height: auto; }

  /* Scale headings down so they fit */
  h1 { font-size: 30px !important; line-height: 1.15 !important; }
  h2 { font-size: 22px !important; line-height: 1.2 !important; }
  h3 { font-size: 18px !important; line-height: 1.25 !important; }

  /* Tag labels stay readable */
  .tag {
    font-size: 11px !important;
    padding: 3px 8px !important;
  }

  /* Revenue impact panels don't overflow their card */
  .panel-red, .panel {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Copy rewrites stack vertically on mobile — the `.rewrite-block` grid
     already handles this, but make sure arrow rotates to fit. */
  .rewrite-arrow { transform: rotate(90deg); }

  /* Sticky mobile CTA stays full width */
  .sticky-cta-bar { padding: 10px 12px; }
}

/* Footer collapses from 5 cols to 2 on mobile */
@media (max-width: 640px) {
  footer .grid.grid-cols-2.md\:grid-cols-5 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ===================================================================
   MOBILE NAV (hamburger)
=================================================================== */
.mobile-nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 2px solid #111827;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.mobile-nav-toggle:hover { background: #111827; color: #FFFFFF; }

.mobile-nav-drawer {
  display: none;
  position: fixed;
  top: 64px;
  right: 0;
  bottom: 0;
  width: min(320px, 90vw);
  background: #FFFFFF;
  border-left: 2px solid #111827;
  box-shadow: -6px 0 0 #DC2626;
  z-index: 60;
  padding: 24px;
  flex-direction: column;
  gap: 4px;
  animation: drawer-in 0.18s ease-out;
}
.mobile-nav-drawer.open { display: flex; }
.mobile-nav-drawer a, .mobile-nav-drawer button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 12px;
  border: 2px solid transparent;
  font-weight: 700;
  font-size: 14px;
  color: #111827;
  background: transparent;
  cursor: pointer;
  transition: all 0.1s ease;
}
.mobile-nav-drawer a:hover,
.mobile-nav-drawer button:hover {
  border-color: #111827;
  background: #FAFAFA;
  color: #DC2626;
}
@keyframes drawer-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.mobile-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(17,24,39,0.4);
  z-index: 55;
}
.mobile-nav-backdrop.open { display: block; }

@media (max-width: 767px) {
  .desktop-nav-links { display: none !important; }
  .mobile-nav-toggle { display: inline-flex; }
}

/* ===================================================================
   CLINICAL BRUTALISM — ZERO BORDER RADIUS ENFORCEMENT
   Rule #1 of the design system: no rounded corners anywhere. This block
   is the backstop so a stray Tailwind `rounded-*` class or a third-party
   style cannot reintroduce curves.
=================================================================== */
*,
*::before,
*::after,
button,
input,
select,
textarea,
a[class*="btn"],
[class*="rounded"] {
  border-radius: 0 !important;
}

/* Tailwind compiled utilities — override explicitly in case the cascade
   from `*` isn't enough for some browser form-control defaults. */
.rounded,
.rounded-sm,
.rounded-md,
.rounded-lg,
.rounded-xl,
.rounded-2xl,
.rounded-3xl,
.rounded-full,
.rounded-t,
.rounded-b,
.rounded-l,
.rounded-r,
.rounded-tl,
.rounded-tr,
.rounded-bl,
.rounded-br {
  border-radius: 0 !important;
}