/* =========================================================
   The Eastern Hive — Responsive layer
   Desktop design is preserved. These rules only apply at
   <=768px (tablet) and <=480px (mobile) so the original
   layout, colors, type, and effects stay identical above 768.
   ========================================================= */

/* Base — touch friendliness for everyone */
html {
  -webkit-text-size-adjust: 100%;
}

/* Make every image fluid by default — nothing should overflow on small screens */
img {
  max-width: 100%;
  height: auto;
}

/* Allow long words / urls to wrap rather than blow out the layout */
h1, h2, h3, h4, p, a, span, li {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Mobile menu (driven by the hamburger button — see responsive.js) */
.mobile-nav {
  display: none;
}

@media (max-width: 768px) {
  .mobile-nav.is-open {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #0d1819;
    border-bottom: 1px solid #234548;
    border-top: 1px solid #234548;
    padding: 0.5rem 0;
  }
  .mobile-nav.is-open a {
    display: block;
    padding: 0.875rem 1.5rem;
    color: #92c5c9;
    font-size: 0.95rem;
    font-weight: 500;
    border-bottom: 1px solid rgba(35, 69, 72, 0.5);
    text-decoration: none;
  }
  .mobile-nav.is-open a:last-child {
    border-bottom: none;
  }
  .mobile-nav.is-open a.active,
  .mobile-nav.is-open a:hover {
    color: #13daec;
    background: rgba(19, 218, 236, 0.05);
  }
}

/* =========================================================
   TABLET — 768px and below
   ========================================================= */
@media (max-width: 768px) {

  /* Header: hide brand wordmark gracefully, give discord button breathing room */
  header .container,
  header > div {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  header .h-16 {
    height: 3.5rem;
  }

  /* Force-show the mobile menu button on touch breakpoints */
  header button[aria-label="Menu"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: 0;
  }

  /* Hide the desktop horizontal nav, show on mobile via the dropdown instead */
  header nav.hidden.md\:flex {
    display: none !important;
  }

  /* Discord pill: shrink label-only on phones, keep icon */
  header a[href*="discord.gg"] {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.75rem !important;
  }

  /* HOME — Hero */
  section.relative.flex.min-h-\[400px\] h1 {
    font-size: 2.5rem !important;
    line-height: 1.05 !important;
  }
  section.relative.flex.min-h-\[400px\] p {
    font-size: 1rem !important;
  }
  section.relative.flex.min-h-\[400px\] .max-w-3xl {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  /* HOME — Server card: stack image above content */
  .group.relative.overflow-hidden.rounded-xl > div.relative.flex {
    flex-direction: column !important;
  }
  .group.relative.overflow-hidden.rounded-xl .lg\:w-2\/5 {
    width: 100% !important;
    height: 180px !important;
  }
  .group.relative.overflow-hidden.rounded-xl .grid.grid-cols-1.sm\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  /* HOME — Mission Protocols: stack to a single column */
  section.py-16 .grid.grid-cols-1.md\:grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  section.py-16 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  section.py-16 h2 {
    font-size: 1.75rem !important;
  }

  /* HOME — CTA section */
  section.py-24 h2 {
    font-size: 2rem !important;
  }
  section.py-24 .flex.flex-col.sm\:flex-row {
    flex-direction: column !important;
  }
  section.py-24 a {
    width: 100%;
  }

  /* SUPPORT — Title */
  section.relative.py-12 h1 {
    font-size: 2.5rem !important;
  }
  section.relative.py-12 p.text-text-muted {
    font-size: 1rem !important;
  }
  section.relative.py-12 .flex.justify-center.items-center.gap-6 {
    flex-direction: column;
    gap: 0.5rem !important;
    align-items: center;
  }

  /* SUPPORT — Tier grid: collapse the divider column, stack to one column on phones */
  section.container .grid.grid-cols-1.md\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  /* The xl divider column should hide already (xl:flex), keep it hidden */
  section.container .hidden.xl\:flex {
    display: none !important;
  }
  /* Drop the perk-list min-height on small screens — content sets its own height */
  ul.space-y-3.mb-8.min-h-\[220px\] {
    min-height: 0 !important;
  }

  /* SUPPORT — Protocol & Policy panel */
  .border.border-border-dark.bg-surface-dark\/30 .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .border.border-border-dark.bg-surface-dark\/30 .p-8 {
    padding: 1.25rem !important;
  }
  .border.border-border-dark.bg-surface-dark\/30 h3 {
    font-size: 1.25rem !important;
  }
  /* Long uppercase pill — let it wrap */
  .inline-block.px-8.py-3.bg-primary\/10 {
    display: block !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.15em !important;
    word-break: keep-all;
  }

  /* RULES — Layout: aside drops below content */
  .flex-1.w-full.flex.justify-center .max-w-\[1200px\] {
    flex-direction: column !important;
    gap: 2rem !important;
    padding: 2rem 1rem !important;
  }
  aside.hidden.lg\:block {
    display: block !important;
    width: 100% !important;
  }
  aside.hidden.lg\:block .sticky {
    position: static !important;
  }

  /* RULES — Section headers */
  section[id] h1,
  section[id] h2 {
    font-size: 1.5rem !important;
  }
  div.flex.flex-col.gap-4.border-l-4 h1 {
    font-size: 2rem !important;
  }

  /* RULES — Rule rows: tighter padding, smaller numerals */
  .group.py-6.pl-8 {
    padding: 1rem 0.75rem !important;
  }
  .group.py-6.pl-8 .flex.gap-6 {
    gap: 0.75rem !important;
  }
  .group.py-6.pl-8 span.font-mono {
    font-size: 1rem !important;
    min-width: 2rem !important;
  }
  .group.py-6.pl-8 h3 {
    font-size: 1rem !important;
  }

  /* RULES — Zero tolerance grid */
  #zero-tolerance .grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  #zero-tolerance .p-8 {
    padding: 1.25rem !important;
  }
  #zero-tolerance h2 {
    font-size: 1.25rem !important;
    letter-spacing: 0.1em !important;
  }

  /* Enforcement protocols list */
  .bg-surface-dark.border.border-border-dark.p-8.rounded-lg ul.grid {
    grid-template-columns: 1fr !important;
  }
  .bg-surface-dark.border.border-border-dark.p-8.rounded-lg {
    padding: 1.25rem !important;
  }

  /* FOOTER — center everything, give some breathing room */
  footer .container {
    padding: 0 1rem;
  }
  footer .flex.flex-col.md\:flex-row {
    text-align: center;
    align-items: center !important;
  }
  footer .items-center.md\:items-start {
    align-items: center !important;
    text-align: center !important;
  }

  /* Generic — section padding clamp on tablet */
  section.py-16,
  section.py-20,
  section.py-24,
  section.pb-20 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
}

/* =========================================================
   MOBILE — 480px and below
   ========================================================= */
@media (max-width: 480px) {

  /* HOME — Hero — tighten further */
  section.relative.flex.min-h-\[400px\] h1 {
    font-size: 2rem !important;
  }
  section.relative.flex.min-h-\[400px\] p {
    font-size: 0.95rem !important;
  }
  section.relative.flex.min-h-\[400px\] .mb-8.inline-flex {
    padding: 0.5rem 1rem !important;
    font-size: 0.75rem !important;
  }

  /* HOME — Server card: smaller image, copy at room temp */
  .group.relative.overflow-hidden.rounded-xl .lg\:w-2\/5 {
    height: 140px !important;
  }
  .group.relative.overflow-hidden.rounded-xl h2 {
    font-size: 1.05rem !important;
  }
  .group.relative.overflow-hidden.rounded-xl .p-6 {
    padding: 1rem !important;
  }

  /* SUPPORT — Title */
  section.relative.py-12 h1 {
    font-size: 2rem !important;
  }
  section.relative.py-12 .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  /* Tighter tier card padding */
  .group.relative.flex.flex-col.glass-panel .flex-1.p-6 {
    padding: 1.25rem !important;
  }
  .group.relative.flex.flex-col.glass-panel h3 {
    font-size: 1.125rem !important;
  }

  /* RULES — Tighten further */
  div.flex.flex-col.gap-4.border-l-4 h1 {
    font-size: 1.5rem !important;
    line-height: 1.1 !important;
  }
  div.flex.flex-col.gap-4.border-l-4 {
    padding-left: 0.75rem !important;
  }
  div.flex.flex-col.gap-4.border-l-4 .text-gray-400.text-lg {
    font-size: 0.95rem !important;
  }
  section[id] h2 {
    font-size: 1.15rem !important;
  }
  .group.py-6.pl-8 h3 {
    font-size: 0.95rem !important;
  }
  .group.py-6.pl-8 p {
    font-size: 0.875rem !important;
  }

  /* CTA buttons — full width, comfy hit-target */
  a[role="button"],
  button {
    min-height: 44px;
  }

  /* Footer fine print readability */
  footer .text-\[9px\] {
    font-size: 10px !important;
    line-height: 1.5 !important;
  }
  footer .text-\[10px\] {
    font-size: 11px !important;
  }

  /* Header — even more compact */
  header span.font-display.text-lg {
    font-size: 0.95rem;
  }
  header a[href*="discord.gg"] span {
    display: none;
  }
  header a[href*="discord.gg"] {
    padding: 0.5rem !important;
  }

  /* Universal — keep horizontal padding consistent */
  .container,
  main > section,
  main > div {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Larger phones / small tablets between 481 and 768 — single safety net */
@media (min-width: 481px) and (max-width: 768px) {
  .group.relative.overflow-hidden.rounded-xl .lg\:w-2\/5 {
    height: 220px !important;
  }
}