/* ==========================================================================
   mobile-pro.css — Mobile Overhaul for searchthe.law
   Version: 1.0.0

   Loaded AFTER style.css. All rules scoped to max-width media queries
   to override desktop defaults without disrupting them.

   Breakpoints:
     768px  — Tablet & small laptop
     480px  — Phone (standard)
     380px  — Small phone (iPhone SE, Galaxy S series compact)

   WCAG 2.1 AA compliance:
     - Touch targets: minimum 44px
     - Font sizes: minimum 14px (0.875rem)
     - Contrast: inherits from existing theme tokens
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. GLOBAL BASELINE & UTILITIES
   -------------------------------------------------------------------------- */

/* Smooth scrolling for anchor links */
@media (max-width: 768px) {
  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }

  /* Prevent horizontal overflow globally */
  body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Prevent any element from breaking layout */
  img,
  video,
  iframe,
  embed,
  object,
  table,
  pre,
  code {
    max-width: 100%;
  }

  img {
    height: auto;
  }

  /* Table containment — allow horizontal scroll if needed */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
  }

  pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  /* === WIDTH CONTAINMENT — prevent any element from bleeding === */
  *,
  *::before,
  *::after {
    max-width: 100vw;
    box-sizing: border-box;
  }

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

  /* Constrain all sections and containers */
  section,
  .section,
  main,
  .container,
  .hero,
  .hero-inner,
  .hero-section,
  .trust-bar,
  .trust-bar-inner,
  .search-results,
  .search-results-inner,
  #caseDetail,
  #searchResults,
  footer,
  .footer-inner {
    max-width: 100% !important;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  /* All direct body children get containment */
  body > * {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* SVGs in the hero must not exceed viewport */
  .hero svg,
  .hero-inner svg {
    max-width: 100%;
    height: auto;
  }

}

/* Visibility utilities — always active, controlled by media queries */
.mobile-only {
  display: none;
}

.desktop-only {
  display: block;
}

@media (max-width: 768px) {
  .mobile-only {
    display: block;
  }

  .desktop-only {
    display: none !important;
  }

  /* Inline variant */
  span.mobile-only,
  a.mobile-only {
    display: inline;
  }

  span.desktop-only,
  a.desktop-only {
    display: none !important;
  }

  /* Flex variant */
  .mobile-only.flex,
  .mobile-only[style*="display: flex"] {
    display: flex;
  }
}


/* --------------------------------------------------------------------------
   1. TOUCH TARGETS — WCAG 2.1 AA (44px minimum)
   All interactive elements get minimum 44px tap height.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  /* --- Primary buttons --- */
  .btn {
    min-height: 44px;
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem; /* 15px */
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    touch-action: manipulation;
  }

  .btn-primary {
    min-height: 48px;
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
  }

  /* --- Sign-in & account buttons --- */
  .btn-sign-in {
    min-height: 44px;
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
  }

  .btn-account {
    min-height: 44px;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
  }

  /* --- Icon-only buttons --- */
  .btn-icon {
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* --- Save search button --- */
  .save-search-btn {
    min-height: 44px;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
  }

  /* --- Expand button (case.html) --- */
  .expand-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    touch-action: manipulation;
  }

  /* --- Result tab buttons --- */
  .result-tab {
    min-height: 44px;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    touch-action: manipulation;
  }

  /* --- Navigation links in mobile menu --- */
  .nav-links a {
    min-height: 48px;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    touch-action: manipulation;
  }

  .nav-links a:last-child {
    border-bottom: none;
  }

  /* --- Footer links --- */
  .footer-col a,
  .footer-links a,
  footer a {
    min-height: 44px;
    padding: 0.5rem 0;
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
    touch-action: manipulation;
  }

  /* --- Generic link tap targets in content areas --- */
  .case-actions .btn {
    min-height: 44px;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    touch-action: manipulation;
  }

  /* --- Search input: 16px prevents iOS zoom --- */
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="url"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px;
    min-height: 44px;
    border-radius: 8px;
  }

  /* Ensure all clickable items have no tap highlight delay */
  a,
  button,
  [role="button"],
  input,
  select,
  textarea,
  label {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(184, 149, 46, 0.15);
  }
}


/* --------------------------------------------------------------------------
   2. FONT SIZE CORRECTIONS — Minimum 14px (0.875rem)
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  .source-badge {
    font-size: 0.875rem; /* was 0.7rem */
    padding: 0.25rem 0.625rem;
    line-height: 1.4;
  }

  .footer-col h4 {
    font-size: 0.9375rem; /* was 0.8rem */
    letter-spacing: 0.04em;
  }

  .footer-bottom {
    font-size: 0.875rem; /* was 0.75rem */
    line-height: 1.5;
  }

  .case-meta-item .label {
    font-size: 0.875rem; /* was 0.72rem */
  }

  .result-meta {
    font-size: 0.875rem; /* was 0.8rem */
    line-height: 1.5;
  }

  .search-tips {
    font-size: 0.875rem; /* was 0.75rem */
    line-height: 1.6;
  }

  .search-tips code {
    font-size: 0.875rem; /* was 0.72rem */
    padding: 0.15rem 0.4rem;
  }

  .tier-badge {
    font-size: 0.875rem; /* was 0.7rem */
    padding: 0.25rem 0.5rem;
  }

  .sidebar-list li {
    font-size: 0.9375rem; /* was 0.82rem */
    line-height: 1.5;
  }

  .saved-meta {
    font-size: 0.875rem; /* was 0.75rem */
    line-height: 1.4;
  }

  .pricing-badge {
    font-size: 0.875rem; /* was 0.7rem */
  }

  .intelligence-panel .area-tag {
    font-size: 0.875rem; /* was 0.75rem */
    padding: 0.3rem 0.6rem;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }

  .intelligence-panel .verified {
    font-size: 0.875rem; /* was 0.78rem */
  }

  /* Trust bar — was dropping to 0.65rem at 380px */
  .trust-bar,
  .trust-bar span,
  .trust-bar-item,
  .trust-item {
    font-size: 0.875rem;
  }
}


/* --------------------------------------------------------------------------
   3. HEADER & NAVIGATION
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  .site-header,
  .header,
  header {
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0.5rem 1rem;
  }

  .header-container,
  .nav-container {
    padding: 0 0.75rem;
  }

  /* Logo sizing */
  .logo img,
  .site-logo img {
    max-height: 36px;
    width: auto;
  }

  /* Hamburger menu button */
  .menu-toggle,
  .hamburger,
  .mobile-menu-btn {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
  }

  /* Mobile menu panel */
  .nav-links,
  .mobile-nav,
  .nav-menu {
    width: 100%;
  }

  /* Hamburger link visual separation */
  .nav-links li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .nav-links li:last-child {
    border-bottom: none;
  }
}


/* --------------------------------------------------------------------------
   4. HOMEPAGE (index.html)
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {


  /* === MOBILE HERO — compact layout, hide redundant logo === */
  /* Hide the large brand logo SVG below navbar (redundant on mobile) */
  .hero-inner > div:first-child {
    display: none !important;
  }

  .hero {
    padding: 1.5rem 1rem 2rem !important;
  }

  .hero-inner {
    max-width: 100%;
    padding: 0;
  }

  .hero h1 {
    font-size: 1.5rem !important;
    line-height: 1.3;
    margin-bottom: 0.5rem;
    padding: 0 0.25rem;
  }

  .hero p {
    font-size: 0.9375rem !important;
    margin-bottom: 1rem;
    padding: 0 0.25rem;
  }

  /* Search hints — tighter on mobile */
  .search-hints {
    gap: 0.3rem !important;
    margin-top: 0.5rem !important;
  }

  .search-hints button {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.6rem !important;
  }

  /* Doc upload hint */
  .hero-inner div[style*="font-size:0.78rem"] {
    font-size: 0.8rem !important;
    margin-top: 0.25rem !important;
  }


  .hero-title {
    font-size: 1.5rem;
    line-height: 1.3;
    margin-bottom: 0.5rem;
  }

  .hero-subtitle {
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 1rem;
  }

  /* Search box on homepage */
  .search-container,
  .hero-search {
    max-width: 100%;
    padding: 0 0.5rem;
  }

  .search-container input,
  .search-box input,
  .hero-search input {
    font-size: 16px; /* prevents iOS zoom */
    padding: 0.875rem 1rem;
    min-height: 48px;
    border-radius: 10px;
    width: 100%;
  }

  .search-container .btn,
  .search-box .btn,
  .hero-search .btn {
    min-height: 48px;
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
  }

  /* Trust bar */
  .trust-bar {
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    padding: 0.75rem 0.5rem;
  }

  .trust-bar-item,
  .trust-item {
    font-size: 0.875rem;
    white-space: nowrap;
  }

  /* Feature cards / sections */
  .features-grid,
  .feature-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0 1rem;
  }

  .feature-card {
    padding: 1.25rem;
    border-radius: 10px;
  }

  /* Pricing section */
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 0 1rem;
  }

  .pricing-card {
    padding: 1.5rem;
  }

  /* Section headings */
  .section-title,
  section h2 {
    font-size: 1.5rem;
    padding: 0 1rem;
  }
}

@media (max-width: 480px) {

  .hero h1,
  .hero-title {
    font-size: 1.35rem !important;
  }

  .hero p,
  .hero-subtitle {
    font-size: 0.875rem !important;
  }

  .hero {
    padding: 1.25rem 0.75rem 1.5rem !important;
  }
}

@media (max-width: 380px) {

  .hero h1,
  .hero-title {
    font-size: 1.25rem !important;
  }

  /* Override the old trust bar 0.65rem */
  .trust-bar,
  .trust-bar span,
  .trust-bar-item,
  .trust-item {
    font-size: 0.875rem !important; /* override inline styles */
  }
}


/* --------------------------------------------------------------------------
   5. SEARCH RESULTS PAGE
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  /* Results container */
  .results-container,
  .search-results {
    padding: 1rem;
    gap: 0.75rem;
  }

  /* Result cards — clear visual separation */
  .result-card,
  .search-result {
    padding: 1rem;
    margin-bottom: 0.75rem;
    border-radius: 10px;
    border-left: 3px solid var(--gold, #b8952e);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  }

  .result-card + .result-card,
  .search-result + .search-result {
    margin-top: 0.75rem;
  }

  .result-card h3,
  .result-title {
    font-size: 1.0625rem;
    line-height: 1.35;
    margin-bottom: 0.5rem;
  }

  .result-card p,
  .result-snippet {
    font-size: 0.9375rem;
    line-height: 1.6;
  }

  /* Result tabs (filter bar) */
  .result-tabs,
  .results-filter {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.375rem;
    padding: 0.5rem 0;
    scrollbar-width: none;
  }

  .result-tabs::-webkit-scrollbar,
  .results-filter::-webkit-scrollbar {
    display: none;
  }

  /* Related searches — horizontal scroll */
  .related-searches,
  .related-search-pills {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.5rem;
    padding: 0.75rem 0;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }

  .related-searches::-webkit-scrollbar,
  .related-search-pills::-webkit-scrollbar {
    display: none;
  }

  .related-searches a,
  .related-searches .pill,
  .related-search-pill {
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 40px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
  }

  /* Search meta / result count */
  .search-meta,
  .results-meta {
    font-size: 0.875rem;
    padding: 0.5rem 0;
  }

  /* Pagination */
  .pagination {
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: center;
    padding: 1rem 0;
  }

  .pagination a,
  .pagination button,
  .page-link {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem;
    border-radius: 8px;
  }
}

@media (max-width: 480px) {

  .result-tab {
    min-height: 44px;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
  }
}


/* --------------------------------------------------------------------------
   6. CASE DETAIL PAGE (case.html) — Currently has ZERO mobile breakpoints
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  /* Case header card */
  .case-header-card {
    padding: 1.25rem;
    border-radius: 10px;
    margin: 0.75rem;
  }

  .case-header-card h1,
  .case-title {
    font-size: 1.375rem;
    line-height: 1.3;
    margin-bottom: 0.75rem;
  }

  /* Case meta grid — stack vertically */
  .case-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  .case-meta-item {
    padding: 0.75rem;
    border-radius: 8px;
  }

  .case-meta-item .label {
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
    display: block;
  }

  .case-meta-item .value {
    font-size: 0.9375rem;
    font-weight: 600;
  }

  /* Content with sidebar — stack on mobile */
  .content-with-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 0 0.75rem;
  }

  .content-with-sidebar .main-content,
  .content-with-sidebar .content-area {
    width: 100%;
    order: 1;
  }

  .content-with-sidebar .sidebar,
  .content-with-sidebar aside {
    width: 100%;
    order: 2;
  }

  /* Judgment text — full-width, comfortable reading */
  .judgment-text,
  .case-body,
  .case-content {
    font-size: 1rem; /* 16px for comfortable reading */
    line-height: 1.75;
    padding: 1.25rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  .judgment-text p {
    margin-bottom: 1rem;
  }

  .judgment-text blockquote {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--gold, #b8952e);
    font-size: 0.9375rem;
    line-height: 1.7;
  }

  /* Citation list */
  .citation-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
  }

  .citation-list a,
  .citation-item {
    min-height: 44px;
    padding: 0.625rem 0.75rem;
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    border-radius: 6px;
    touch-action: manipulation;
  }

  /* Case actions bar */
  .case-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem 0.75rem;
  }

  .case-actions .btn {
    flex: 1 1 calc(50% - 0.25rem);
    min-height: 44px;
    justify-content: center;
    font-size: 0.875rem;
  }

  /* Sidebar sections in case view */
  .sidebar-section,
  .case-sidebar-section {
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 10px;
  }

  .sidebar-section h3,
  .sidebar-section h4 {
    font-size: 1rem;
    margin-bottom: 0.75rem;
  }

  .sidebar-list li {
    font-size: 0.9375rem;
    padding: 0.5rem 0;
    min-height: 40px;
    display: flex;
    align-items: center;
  }

  .sidebar-list li a {
    min-height: 44px;
    display: flex;
    align-items: center;
    width: 100%;
  }
}

@media (max-width: 480px) {

  .case-header-card {
    margin: 0.5rem;
    padding: 1rem;
  }

  .case-header-card h1,
  .case-title {
    font-size: 1.25rem;
  }

  /* Stack meta to single column on small phones */
  .case-meta-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  /* Case actions — full width buttons */
  .case-actions .btn {
    flex: 1 1 100%;
  }

  .judgment-text,
  .case-body,
  .case-content {
    padding: 1rem 0.75rem;
  }
}


/* --------------------------------------------------------------------------
   7. GETTING STARTED PAGE (getting-started.html) — Currently ZERO breakpoints
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  .getting-started,
  .content-page,
  .page-content {
    padding: 1.5rem 1rem;
  }

  .getting-started .container,
  .content-page .container {
    max-width: 100%;
    padding: 0 0.75rem;
  }

  .getting-started h1,
  .content-page h1 {
    font-size: 1.625rem;
    line-height: 1.3;
    margin-bottom: 1rem;
  }

  .getting-started h2,
  .content-page h2 {
    font-size: 1.375rem;
    line-height: 1.35;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
  }

  .getting-started h3,
  .content-page h3 {
    font-size: 1.125rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
  }

  .getting-started p,
  .content-page p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1rem;
  }

  .getting-started ul,
  .getting-started ol,
  .content-page ul,
  .content-page ol {
    padding-left: 1.25rem;
    margin-bottom: 1rem;
  }

  .getting-started li,
  .content-page li {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
  }

  /* Step cards / instruction blocks */
  .step-card,
  .guide-step {
    padding: 1.25rem;
    margin-bottom: 1rem;
    border-radius: 10px;
  }

  .step-number {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 0.75rem;
    flex-shrink: 0;
  }
}

@media (max-width: 480px) {

  .getting-started h1,
  .content-page h1 {
    font-size: 1.375rem;
  }

  .getting-started,
  .content-page,
  .page-content {
    padding: 1rem 0.75rem;
  }
}


/* --------------------------------------------------------------------------
   8. ABOUT PAGE (about.html) — Currently ZERO breakpoints
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  .about-page,
  .about {
    padding: 1.5rem 1rem;
  }

  .about-page .container,
  .about .container {
    max-width: 100%;
    padding: 0 0.75rem;
  }

  .about-page h1,
  .about h1 {
    font-size: 1.625rem;
    line-height: 1.3;
    margin-bottom: 1rem;
  }

  .about-page h2,
  .about h2 {
    font-size: 1.375rem;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
  }

  .about-page p,
  .about p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1rem;
  }

  /* Team grid / cards */
  .team-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .team-card {
    padding: 1.25rem;
    text-align: center;
    border-radius: 10px;
  }

  .team-card img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 0.75rem;
  }

  /* Stats / values grid */
  .stats-grid,
  .values-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

@media (max-width: 480px) {

  .about-page h1,
  .about h1 {
    font-size: 1.375rem;
  }

  .stats-grid,
  .values-grid {
    grid-template-columns: 1fr;
  }
}


/* --------------------------------------------------------------------------
   9. INSIGHT ARTICLE PAGE (insight-article.html)
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  .insight-article,
  .article-page {
    padding: 1.5rem 1rem;
  }

  .insight-article .container,
  .article-page .container {
    max-width: 100%;
    padding: 0 0.75rem;
  }

  .article-header {
    margin-bottom: 1.5rem;
  }

  .article-header h1 {
    font-size: 1.5rem;
    line-height: 1.3;
  }

  .article-meta {
    font-size: 0.875rem;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .article-body {
    font-size: 1rem;
    line-height: 1.75;
  }

  .article-body h2 {
    font-size: 1.375rem;
    margin-top: 2rem;
  }

  .article-body h3 {
    font-size: 1.125rem;
    margin-top: 1.5rem;
  }

  /* Tables in articles — convert to stacked cards */
  .article-body table {
    display: block;
    width: 100%;
  }

  .article-body thead {
    display: none;
  }

  .article-body tbody {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .article-body tr {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .article-body td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.4rem 0;
    font-size: 0.9375rem;
    border: none;
    gap: 0.5rem;
  }

  .article-body td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--gold, #b8952e);
    flex-shrink: 0;
    min-width: 35%;
  }

  /* Search links in articles — larger touch targets */
  .article-body a,
  .search-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0;
  }

  /* Case reference links */
  .case-ref,
  .case-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.5rem;
    font-size: 0.9375rem;
  }
}

@media (max-width: 480px) {

  .article-header h1 {
    font-size: 1.25rem;
  }
}


/* --------------------------------------------------------------------------
   10. CASEBOUND PAGE (casebound.html)
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  .casebound-page {
    padding: 1.5rem 1rem;
  }

  .casebound-page .container {
    max-width: 100%;
    padding: 0 0.75rem;
  }
}

/* Fix footer gap overflow at 375px */
@media (max-width: 480px) {

  .casebound-page footer,
  .casebound-page .footer-content {
    gap: 1.5rem; /* was 3rem */
  }

  .casebound-page .footer-grid {
    gap: 1.5rem;
    grid-template-columns: 1fr;
  }
}


/* --------------------------------------------------------------------------
   11. FOOTER — All pages
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  .site-footer,
  footer {
    padding: 2rem 1rem 6rem; /* extra bottom for bottom bar clearance */
  }

  .footer-grid,
  .footer-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .footer-col {
    text-align: left;
  }

  .footer-col h4 {
    font-size: 0.9375rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .footer-col ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
  }

  .footer-col li {
    width: 50%;
  }

  .footer-col a {
    min-height: 44px;
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
  }

  .footer-bottom {
    font-size: 0.875rem;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    text-align: center;
    line-height: 1.6;
  }

  .footer-bottom a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.25rem;
  }
}

@media (max-width: 480px) {

  .footer-col li {
    width: 100%;
  }

  footer {
    padding-bottom: 5rem; /* bottom bar clearance */
  }
}


/* --------------------------------------------------------------------------
   12. MOBILE BOTTOM NAVIGATION BAR
   -------------------------------------------------------------------------- */

.mobile-bottom-bar {
  display: none; /* hidden on desktop */
}

@media (max-width: 768px) {

  .mobile-bottom-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    height: 56px;
    background: var(--navy, #1a2332);
    border-top: 1px solid rgba(184, 149, 46, 0.2);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3);
    justify-content: space-around;
    align-items: stretch;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .bottom-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    min-height: 56px;
    padding: 0.375rem 0.25rem;
    text-decoration: none;
    color: var(--text-light, #8899aa);
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    transition: color 0.2s ease, background-color 0.15s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(184, 149, 46, 0.1);
    position: relative;
  }

  .bottom-bar-item:hover,
  .bottom-bar-item:focus {
    color: var(--gold-light, #d4af37);
    background: rgba(184, 149, 46, 0.06);
    outline: none;
  }

  .bottom-bar-item.active {
    color: var(--gold, #b8952e);
  }

  .bottom-bar-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 25%;
    right: 25%;
    height: 2px;
    background: var(--gold, #b8952e);
    border-radius: 0 0 2px 2px;
  }

  .bottom-bar-icon {
    font-size: 1.25rem;
    line-height: 1;
    margin-bottom: 0.125rem;
    display: block;
  }

  .bottom-bar-label {
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
  }

  /* Offset body content so it's not hidden behind the bar */
  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
}


/* --------------------------------------------------------------------------
   13. INTELLIGENCE PANEL & RESEARCH TOOLS
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  .intelligence-panel {
    padding: 1rem;
    margin: 0.75rem;
    border-radius: 10px;
  }

  .intelligence-panel h3,
  .intelligence-panel h4 {
    font-size: 1rem;
    margin-bottom: 0.75rem;
  }

  .intelligence-panel .area-tag {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    margin: 0.25rem 0.25rem 0.25rem 0;
    border-radius: 6px;
  }

  .intelligence-panel .verified {
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }

  /* Saved searches */
  .saved-search-item {
    padding: 0.75rem;
    min-height: 48px;
    display: flex;
    align-items: center;
    border-radius: 8px;
  }

  .saved-meta {
    font-size: 0.875rem;
    line-height: 1.5;
  }
}


/* --------------------------------------------------------------------------
   14. MODALS & OVERLAYS
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  .modal,
  .overlay,
  .dialog {
    padding: 0;
    align-items: flex-end; /* slide up from bottom on mobile */
  }

  .modal-content,
  .dialog-content {
    width: 100%;
    max-width: 100%;
    max-height: 90vh;
    border-radius: 16px 16px 0 0;
    padding: 1.5rem 1rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal-header {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .modal-close,
  .dialog-close {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
  }
}


/* --------------------------------------------------------------------------
   15. FORMS & INPUTS — General
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  .form-group {
    margin-bottom: 1rem;
  }

  .form-group label {
    font-size: 0.9375rem;
    margin-bottom: 0.375rem;
    display: block;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    width: 100%;
    font-size: 16px; /* iOS zoom prevention */
    min-height: 44px;
    padding: 0.625rem 0.75rem;
    border-radius: 8px;
    box-sizing: border-box;
  }

  .form-group textarea {
    min-height: 120px;
    resize: vertical;
  }

  /* Checkbox / radio — larger touch */
  .form-group input[type="checkbox"],
  .form-group input[type="radio"] {
    width: 20px;
    height: 20px;
    min-height: 20px;
    margin-right: 0.5rem;
  }

  .checkbox-label,
  .radio-label {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    cursor: pointer;
  }

  /* Form error messages */
  .form-error,
  .error-message {
    font-size: 0.875rem;
    margin-top: 0.25rem;
  }
}


/* --------------------------------------------------------------------------
   16. CARDS & PANELS — General
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  .card,
  .panel {
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 0.75rem;
  }

  .card h3,
  .panel h3 {
    font-size: 1.0625rem;
    line-height: 1.3;
    margin-bottom: 0.5rem;
  }

  .card p,
  .panel p {
    font-size: 0.9375rem;
    line-height: 1.6;
  }

  /* Card actions row */
  .card-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
  }

  .card-actions .btn {
    flex: 1;
    min-height: 44px;
    justify-content: center;
  }
}


/* --------------------------------------------------------------------------
   17. BREADCRUMBS & PAGE NAVIGATION
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  .breadcrumb,
  .breadcrumbs {
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .breadcrumb::-webkit-scrollbar,
  .breadcrumbs::-webkit-scrollbar {
    display: none;
  }

  .breadcrumb a,
  .breadcrumbs a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0;
  }
}


/* --------------------------------------------------------------------------
   18. BADGES, TAGS & PILLS
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  .badge,
  .tag,
  .pill {
    font-size: 0.875rem;
    padding: 0.3rem 0.625rem;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
    line-height: 1.3;
  }

  .source-badge {
    font-size: 0.875rem;
    padding: 0.3rem 0.625rem;
  }

  .tier-badge {
    font-size: 0.875rem;
    padding: 0.3rem 0.625rem;
  }

  .pricing-badge {
    font-size: 0.875rem;
    padding: 0.3rem 0.625rem;
  }
}


/* --------------------------------------------------------------------------
   19. NOTIFICATIONS & ALERTS
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  .alert,
  .notification,
  .banner {
    padding: 1rem;
    margin: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    border-radius: 10px;
  }

  .alert .btn,
  .notification .btn,
  .banner .btn {
    margin-top: 0.75rem;
    width: 100%;
    min-height: 44px;
  }

  /* Dismiss button */
  .alert-dismiss,
  .notification-dismiss,
  .banner-dismiss {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}


/* --------------------------------------------------------------------------
   20. LOADING & SKELETON STATES
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  .skeleton-card,
  .loading-card {
    padding: 1rem;
    border-radius: 10px;
    margin-bottom: 0.75rem;
  }

  .skeleton-line {
    height: 14px;
    border-radius: 4px;
    margin-bottom: 0.5rem;
  }

  .skeleton-line:last-child {
    width: 60%;
  }
}


/* --------------------------------------------------------------------------
   21. CONTAINER & LAYOUT OVERRIDES
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  .container {
    padding-left: 1rem;
    padding-right: 1rem;
    max-width: 100%;
  }

  /* Two-column layouts — stack */
  .two-col,
  .grid-2,
  .split-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .two-col > *,
  .grid-2 > *,
  .split-layout > * {
    width: 100%;
  }

  /* Three-column layouts — stack */
  .three-col,
  .grid-3 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .three-col > *,
  .grid-3 > * {
    width: 100%;
  }

  /* Section spacing */
  section {
    padding: 2rem 0;
  }
}

@media (max-width: 480px) {

  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  section {
    padding: 1.5rem 0;
  }
}


/* --------------------------------------------------------------------------
   22. MY RESEARCH / SAVED ITEMS PAGE
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  .research-list,
  .saved-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .research-item,
  .saved-item {
    padding: 1rem;
    border-radius: 10px;
    border-left: 3px solid var(--gold, #b8952e);
  }

  .research-item h3,
  .saved-item h3 {
    font-size: 1rem;
    line-height: 1.35;
    margin-bottom: 0.375rem;
  }

  .research-item .meta,
  .saved-item .meta,
  .saved-meta {
    font-size: 0.875rem;
  }

  .research-actions,
  .saved-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
  }

  .research-actions .btn,
  .saved-actions .btn {
    min-height: 44px;
    flex: 1;
    justify-content: center;
  }
}


/* --------------------------------------------------------------------------
   23. INSIGHTS / ARTICLES LIST
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  .insights-grid,
  .articles-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0 0.75rem;
  }

  .insight-card,
  .article-card {
    border-radius: 10px;
    overflow: hidden;
  }

  .insight-card img,
  .article-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
  }

  .insight-card-body,
  .article-card-body {
    padding: 1rem;
  }

  .insight-card h3,
  .article-card h3 {
    font-size: 1.0625rem;
    line-height: 1.35;
    margin-bottom: 0.5rem;
  }

  .insight-card p,
  .article-card p {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
}


/* --------------------------------------------------------------------------
   24. SAFE AREA INSETS (Notched devices — iPhone X+)
   -------------------------------------------------------------------------- */

@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {

    .mobile-bottom-bar {
      padding-bottom: env(safe-area-inset-bottom);
      height: calc(56px + env(safe-area-inset-bottom));
    }

    body {
      padding-bottom: calc(56px + env(safe-area-inset-bottom));
    }

    .modal-content,
    .dialog-content {
      padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
    }
  }
}


/* --------------------------------------------------------------------------
   25. PRINT — Remove mobile-only UI for print
   -------------------------------------------------------------------------- */

@media print {

  .mobile-bottom-bar {
    display: none !important;
  }

  body {
    padding-bottom: 0 !important;
  }

  .mobile-only {
    display: none !important;
  }
}


/* --------------------------------------------------------------------------
   26. REDUCED MOTION — Accessibility
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* --------------------------------------------------------------------------
   27. DARK MODE REFINEMENTS (if system prefers dark)
   Already a dark theme, but ensure consistency on mobile
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  /* Ensure focus outlines are visible on dark background */
  *:focus-visible {
    outline: 2px solid var(--gold, #b8952e);
    outline-offset: 2px;
  }

  /* Selection color */
  ::selection {
    background: rgba(184, 149, 46, 0.3);
    color: #fff;
  }

  ::-moz-selection {
    background: rgba(184, 149, 46, 0.3);
    color: #fff;
  }
}


/* --------------------------------------------------------------------------
   28. LANDSCAPE PHONE ADJUSTMENTS
   -------------------------------------------------------------------------- */

@media (max-width: 768px) and (orientation: landscape) {

  .hero,
  .hero-section {
    padding: 1.5rem 2rem;
  }

  .hero h1,
  .hero-title {
    font-size: 1.5rem;
  }

  .mobile-bottom-bar {
    height: 48px;
  }

  .bottom-bar-icon {
    font-size: 1.125rem;
  }

  .bottom-bar-label {
    font-size: 0.625rem;
  }

  body {
    padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
  }

  /* In landscape, allow two-column for case meta */
  .case-meta-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}


/* --------------------------------------------------------------------------
   29. SEARCH TIPS PANEL
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  .search-tips {
    font-size: 0.875rem;
    line-height: 1.6;
    padding: 1rem;
    border-radius: 8px;
  }

  .search-tips code {
    font-size: 0.875rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    word-break: break-word;
  }

  .search-tips h4,
  .search-tips h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }

  .search-tips ul {
    padding-left: 1rem;
  }

  .search-tips li {
    font-size: 0.875rem;
    margin-bottom: 0.375rem;
    line-height: 1.5;
  }
}


/* --------------------------------------------------------------------------
   30. SCROLLBAR STYLING (thin on mobile)
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(184, 149, 46, 0.3) transparent;
  }

  /* Webkit */
  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(184, 149, 46, 0.3);
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(184, 149, 46, 0.5);
  }
}


/* ==========================================================================
   END mobile-pro.css
   ========================================================================== */