/* ============================================================
   HUB-RESPONSIVE.CSS — Signal Lawyers Portal
   
   IMPORTANT: Load AFTER the inline <style> block in each HTML
   file so these overrides win the cascade. The <link> tag must
   be placed immediately before </head>, after </style>.
   
   Breakpoints:
     Tablet   768px – 1023px   (max-width: 1023px)
     Mobile   ≤ 767px           (max-width: 767px)
   Desktop (1024px+) is source of truth — no overrides.
   
   Applies to: index.html, workspace.html
   ============================================================ */


/* ============================================================
   SHARED — TOUCH DEVICE HOVER FIX (#2)
   Resets sticky :hover card states on devices without a pointer.
   ============================================================ */

@media (hover: none) {

  .tool-card:hover {
    box-shadow: var(--shadow-card);
    border-color: var(--color-border-light);
    transform: none;
  }

  .tool-card:hover .tool-card-icon {
    background: var(--color-primary-light);
    color: var(--color-primary);
  }

  .tool-card:hover .tool-card-cta {
    gap: var(--space-1);
  }
}


/* ============================================================
   WORKSPACE.HTML — SIDEBAR TOGGLE + FULL-PAGE MAT
   New elements: .sidebar-menu-check, .sidebar-menu-toggle,
   .sidebar-mat, .sidebar-mat-header, .sidebar-mat-logo,
   .sidebar-mat-close, .sidebar-mat-footer, .sidebar-mat-schedule
   ============================================================ */

/* Desktop: toggle hidden, mat is the normal sidebar nav container */
.sidebar-menu-check,
.sidebar-menu-toggle {
  display: none;
}

.sidebar-mat {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}

/* Mat header and footer are mobile-only chrome */
.sidebar-mat-header,
.sidebar-mat-footer {
  display: none;
}


/* ============================================================
   INDEX.HTML — PORTAL DASHBOARD
   ============================================================ */

/* Fluid tool grid (#1) — single rule, no explicit breakpoints.
   auto-fill + minmax collapses naturally:
     ≥ 800px content → 3 columns (~260px each)
     ≥ 536px content → 2 columns (~252px each)
     < 536px content → 1 column  (full width)                 */
.tool-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* Safe area insets (#3) — portal footer */
@supports (padding: env(safe-area-inset-bottom)) {
  .portal-footer {
    padding-bottom: max(var(--space-5), env(safe-area-inset-bottom));
  }
}

/* ── Tablet ──────────────────────────────────────────────── */
@media (max-width: 1023px) {

  .portal-header {
    padding: 0 var(--space-6);
  }

  .portal-main {
    padding: var(--space-12) var(--space-6) var(--space-16);
  }

  .portal-footer {
    padding: var(--space-4) var(--space-6);
  }

  @supports (padding: env(safe-area-inset-bottom)) {
    .portal-footer {
      padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
    }
  }

  .sidebar {
    width: 200px;
  }
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* ── index.html ─────────────────────────────────────────── */

  .portal-header {
    padding: 0 var(--space-4);
  }

  .portal-user-name {
    display: none;
  }

  .portal-main {
    padding: var(--space-10) var(--space-4) var(--space-12);
  }

  .portal-welcome {
    margin-bottom: var(--space-8);
  }

  .portal-welcome h1 {
    font-size: var(--text-h2); /* 32px at 390px */
  }

  .tool-section {
    margin-bottom: var(--space-8);
  }

  .portal-footer {
    flex-wrap: wrap;
    padding: var(--space-4);
    gap: var(--space-3) var(--space-5);
  }

  .portal-footer-copy {
    margin-left: 0;
    width: 100%;
  }

  @supports (padding: env(safe-area-inset-bottom)) {
    .portal-footer {
      padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
    }
  }

  /* ── workspace.html ─────────────────────────────────────── */

  /* Override html/body scroll lock from workspace.html inline <style> */
  html, body {
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Stack workspace vertically */
  .workspace {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Sidebar → 60px horizontal top bar */
  .sidebar {
    width: 100%;
    height: 60px;
    flex-direction: row;
    align-items: center;
    overflow: visible;
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 20;
  }

  /* sidebar-top: back link + logo + hamburger */
  .sidebar-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    padding: 0 var(--space-4);
    border-bottom: none;
    height: 100%;
    flex: 1;
    min-width: 0;
  }

  .sidebar-back {
    margin-bottom: 0;
    white-space: nowrap;
  }

  .sidebar-logo img {
    height: 18px;
  }

  /* Hamburger button */
  .sidebar-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-light-dim);
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    margin-left: auto;
    flex-shrink: 0;
    user-select: none;
    transition: background var(--transition-fast), color var(--transition-fast);
  }

  .sidebar-menu-toggle:hover {
    background: var(--color-bg-dark-raised);
    color: var(--color-text-light-muted);
  }

  /* Visually hidden checkbox */
  .sidebar-menu-check {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  /* Full-page mat — hidden by default */
  .sidebar-mat {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--color-bg-dark);
    z-index: 100;
    flex-direction: column;
    overflow: hidden;
  }

  /* Checkbox checked → show full-page mat */
  .sidebar-menu-check:checked ~ .sidebar-mat {
    display: flex;
  }

  /* Mat header: logo + X close */
  .sidebar-mat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border-dark);
    flex-shrink: 0;
  }

  .sidebar-mat-logo {
    height: 22px;
    width: auto;
    display: block;
    opacity: 0.9;
  }

  .sidebar-mat-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--color-text-light-dim);
    transition: background var(--transition-fast), color var(--transition-fast);
  }

  .sidebar-mat-close:hover {
    background: var(--color-bg-dark-raised);
    color: var(--color-text-light-muted);
  }

  /* Tool nav — scrolls naturally inside the mat */
  .sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-5) var(--space-4) var(--space-4);
    /* reset prior fixed-position styles */
    position: static;
    display: block;
    top: auto;
    left: auto;
    right: auto;
    max-height: none;
    box-shadow: none;
    background: transparent;
    border-bottom: none;
    z-index: auto;
  }

  /* Mat footer: full-width Book a Call CTA */
  .sidebar-mat-footer {
    display: flex;
    padding: var(--space-5) var(--space-6);
    border-top: 1px solid var(--color-border-dark);
    flex-shrink: 0;
  }

  .sidebar-mat-schedule {
    width: 100%;
    justify-content: center;
    padding: 12px var(--space-6);
    font-size: 13px;
    border-radius: var(--radius-md);
  }

  /* Hide desktop sidebar chrome entirely on mobile */
  .sidebar-bottom {
    display: none;
  }

  /* Main → full-width iframe below the top bar */
  .workspace-main {
    flex: none;
    width: 100%;
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px);
    overflow: hidden;
  }

  /* Safe area (#3) — home indicator on notched iPhones */
  @supports (padding: env(safe-area-inset-bottom)) {
    .workspace-main {
      height: calc(100dvh - 60px - env(safe-area-inset-bottom));
    }
  }

  /* Placeholder heading — scale down on narrow screens */
  .workspace-placeholder-name {
    font-size: var(--text-h4);
  }
}