/* CyberTips Bermuda - shared site styles */

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

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: #0e0f0c;
  color: #0e0f0c;
  line-height: 1.5;
  overflow-wrap: break-word;
}

img { max-width: 100%; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Tip Sheets nav dropdown */
.nav-tips-drop {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: #181a17;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 6px;
  min-width: 230px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  z-index: 9999;
}
.nav-tips:hover .nav-tips-drop { opacity: 1; pointer-events: all; }
.nav-tips-drop a {
  display: block;
  padding: 9px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: rgba(255,255,255,0.65);
  font-size: 13px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.nav-tips-drop a:hover { background: rgba(232,50,122,0.15); color: #e8327a; }

/* ---------- Mobile / responsive ---------- */

html { overflow-x: hidden; }
body { overflow-x: hidden; }
video { max-width: 100%; }

/* Any multi-column inline grid collapses to a single column on phones -
   covers hero split layouts, card grids, footer columns, form rows, etc.
   across every page without needing per-page CSS. */
@media (max-width: 700px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* A 1fr track still grows to fit its item's min-content by default (grid
     items get an implicit min-width:auto, same gotcha as flexbox) - reset it
     so text-heavy cells actually wrap instead of blowing out the column. */
  [style*="grid-template-columns"] > * { min-width: 0 !important; }
}

/* Trim the large desktop gutters/type scale that every page was built with. */
@media (max-width: 880px) {
  nav, section, footer, header { padding-left: 20px !important; padding-right: 20px !important; }
  /* Full-bleed bars built as plain <div>s (breadcrumbs, the report step
     indicator) rather than <section>/<footer> use the same 80px gutters -
     catch the exact values this codebase actually uses. */
  [style*="padding:0 80px"], [style*="padding: 0 80px"],
  [style*="padding:12px 80px"], [style*="padding: 12px 80px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
@media (max-width: 700px) {
  h1 { font-size: 32px !important; line-height: 1.2 !important; }
  h2 { font-size: 24px !important; }
}

/* Two-column flex layouts (hero text+CTA, footer link rows) that don't use
   CSS grid still need to stack on phones - flexbox doesn't shrink below a
   row's min-content by default, which is the single biggest source of
   horizontal overflow on this site. Any row using justify-content:space-between
   is, in this codebase, always exactly this "shrinkable text + rigid CTA/
   button-group" pattern, so it's safe to force-wrap universally. */
@media (max-width: 700px) {
  footer { flex-wrap: wrap !important; row-gap: 12px !important; }
  footer > div { flex-wrap: wrap !important; row-gap: 8px !important; }
  [style*="justify-content:space-between"], [style*="justify-content: space-between"] {
    flex-wrap: wrap !important;
    row-gap: 16px !important;
  }
  /* Same min-content blowout risk as grid items applies to flex children
     with text content and no explicit width. */
  [style*="display:flex"] > *, [style*="display: flex"] > * { min-width: 0; }
}

/* Form controls inside flex rows refuse to shrink below their intrinsic
   size unless min-width is reset - this is what pushed the Case Lookup
   button (and similar input+button rows) off the right edge. */
input, select, textarea { min-width: 0; }

/* Report form step indicator: 3 nowrap labels + connecting lines never fit
   on a phone width. Drop the labels and keep just the numbered circles. */
@media (max-width: 480px) {
  #report-steps span { display: none; }
}

/* Home page hero: a fixed-height (100vh) section with two absolutely
   positioned content layers (text+logo row, stat card strip) stacked on
   top of a video background. That works on desktop but has nowhere to
   grow on a phone, so let it become a normal-flow, auto-height section
   instead of trying to cram everything into a fixed box. */
@media (max-width: 700px) {
  #home-hero { height: auto !important; min-height: 0 !important; max-height: none !important; }
  #home-hero-content {
    position: relative !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 32px 20px 20px !important;
    gap: 24px !important;
  }
  #home-hero-content > div:last-child { align-self: center; }
  #home-hero-stats { position: relative !important; padding: 20px !important; }
}

/* Tipsheets category filter row has no wrap of its own. */
@media (max-width: 700px) {
  #filterTabs { flex-wrap: wrap !important; }
}

/* Hamburger toggle, injected by site.js as the last child of <nav>. */
.ct-hamburger {
  display: none;
  background: rgba(255,255,255,0.08);
  border: none;
  border-radius: 8px;
  width: 38px;
  height: 38px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 210;
  flex-shrink: 0;
}
.ct-hamburger span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; }

@media (max-width: 880px) {
  .ct-hamburger { display: flex; }

  /* The nav's link row becomes a slide-down panel, toggled by the hamburger. */
  nav > div:last-of-type { display: none !important; }
  nav.ct-mobile-open > div:last-of-type {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    position: fixed !important;
    top: 72px !important;
    left: 0 !important;
    right: 0 !important;
    background: #0e0f0c !important;
    padding: 14px 20px 28px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    max-height: calc(100vh - 72px) !important;
    overflow-y: auto !important;
    z-index: 190 !important;
  }

  /* Tip Sheets becomes a tap-to-expand section instead of hover, and its
     dropdown lays out inline (full width) rather than as a floating panel. */
  .nav-tips-drop {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: none !important;
    display: none !important;
    width: 100% !important;
    min-width: 0 !important;
    box-shadow: none !important;
    margin-top: 6px !important;
    background: rgba(255,255,255,0.04) !important;
  }
  .nav-tips.ct-open .nav-tips-drop { display: block !important; pointer-events: all !important; }
}