/*!
 * NexiBook Public Skin — Pasul 5/6
 * Scope: body.nb public marketing/landing pages (terms, calendar, demo, footer, 403, etc.)
 * Author: BUILDER
 * Date: 2025-01-21
 */

/* ── Base ── */
body.nb {
  background-color: var(--nb-bg-body);
  color: var(--nb-text-main);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
}

body.nb a {
  color: var(--nb-gold);
  text-decoration: none;
}

body.nb a:hover {
  color: var(--nb-gold-deep);
  text-decoration: underline;
}

/* ── Headings ── */
body.nb h1 {
  color: var(--nb-text-main);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 1rem;
}

body.nb h2 {
  color: var(--nb-text-main);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: 0.875rem;
}

body.nb h3 {
  color: var(--nb-text-main);
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

body.nb h4 {
  color: var(--nb-text-main);
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.625rem;
}

body.nb h5,
body.nb h6 {
  color: var(--nb-text-main);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* ── Container ── */
body.nb .container {
  max-width: 1200px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

body.nb .container-fluid {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* ── Buttons ── */
body.nb .btn {
  border-radius: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.625rem 1.25rem;
  transition: all 0.2s ease;
}

body.nb .btn-primary {
  background: linear-gradient(135deg, var(--nb-gold), var(--nb-gold-deep)) !important;
  border: none !important;
  color: #000 !important;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.25);
}

body.nb .btn-primary:hover {
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.4);
  transform: translateY(-1px);
}

body.nb .btn-secondary {
  background-color: var(--nb-bg-elevated) !important;
  border: 1px solid var(--nb-border-light) !important;
  color: var(--nb-text-main) !important;
}

body.nb .btn-secondary:hover {
  background-color: var(--nb-bg-surface) !important;
  border-color: var(--nb-gold) !important;
  color: var(--nb-gold) !important;
}

body.nb .btn-lg {
  font-size: 1.0625rem;
  padding: 0.875rem 1.75rem;
}

body.nb .btn-sm {
  font-size: 0.8125rem;
  padding: 0.4375rem 0.875rem;
}

/* ── Lead / Hero text ── */
body.nb .lead {
  color: var(--nb-text-muted);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.65;
}

/* ── Footer ── */
body.nb footer,
body.nb .footer {
  background-color: var(--nb-bg-elevated);
  border-top: 1px solid var(--nb-border-light);
  color: var(--nb-text-muted);
  font-size: 0.8125rem;
  padding: 2rem 0;
}

body.nb footer a,
body.nb .footer a {
  color: var(--nb-gold);
  font-weight: 500;
}

body.nb footer a:hover,
body.nb .footer a:hover {
  color: var(--nb-gold-deep);
}

body.nb footer p,
body.nb .footer p {
  color: var(--nb-text-muted);
  margin-bottom: 0.5rem;
}

body.nb footer .footer-heading,
body.nb .footer .footer-heading {
  color: var(--nb-text-main);
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Lists & Articles ── */
body.nb ul,
body.nb ol {
  color: var(--nb-text-main);
  padding-left: 1.5rem;
}

body.nb li {
  margin-bottom: 0.375rem;
}

body.nb article p,
body.nb .article-content p,
body.nb .terms-content p,
body.nb .privacy-content p {
  color: var(--nb-text-main);
  margin-bottom: 1rem;
}

body.nb article h2,
body.nb .article-content h2,
body.nb .terms-content h2,
body.nb .privacy-content h2 {
  border-bottom: 1px solid var(--nb-border-light);
  padding-bottom: 0.5rem;
  margin-top: 2rem;
}

body.nb article h3,
body.nb .article-content h3,
body.nb .terms-content h3,
body.nb .privacy-content h3 {
  margin-top: 1.5rem;
}

/* ── Cards (light public use) ── */
body.nb .card {
  background-color: var(--nb-bg-surface);
  border: 1px solid var(--nb-border-light);
  border-radius: 14px;
}

body.nb .card-header {
  background-color: var(--nb-bg-surface);
  border-bottom: 1px solid var(--nb-border-light);
  border-radius: 14px 14px 0 0;
  color: var(--nb-text-main);
  font-weight: 600;
}

/* ── Forms (public contact/demo) ── */
body.nb .form-control {
  background-color: var(--nb-bg-elevated);
  border: 1px solid var(--nb-border-light);
  border-radius: 10px;
  color: var(--nb-text-main);
}

body.nb .form-control:focus {
  background-color: var(--nb-bg-elevated);
  border-color: var(--nb-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
  color: var(--nb-text-main);
}

body.nb .form-label {
  color: var(--nb-text-main);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* ── Utility text ── */
body.nb .text-muted {
  color: var(--nb-text-muted) !important;
}

body.nb .text-primary {
  color: var(--nb-gold) !important;
}

body.nb .bg-light {
  background-color: var(--nb-bg-elevated) !important;
}

body.nb .border {
  border-color: var(--nb-border-light) !important;
}

/* ── Blockquote ── */
body.nb blockquote {
  border-left: 3px solid var(--nb-gold);
  color: var(--nb-text-muted);
  font-style: italic;
  margin: 1.5rem 0;
  padding-left: 1.25rem;
}

/* ── Horizontal rule ── */
body.nb hr {
  border-color: var(--nb-border-light);
  margin: 2rem 0;
  opacity: 1;
}

/* ── Code / Pre ── */
body.nb code {
  background-color: var(--nb-bg-elevated);
  border-radius: 4px;
  color: var(--nb-gold);
  font-size: 0.875em;
  padding: 0.125rem 0.375rem;
}

body.nb pre {
  background-color: var(--nb-bg-elevated);
  border: 1px solid var(--nb-border-light);
  border-radius: 10px;
  color: var(--nb-text-main);
  padding: 1rem;
}


/* ── iOS scroll polish ── */
body.nb {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* ── View transitions (iOS/macOS Safari 18.2+) ── */
@view-transition {
  navigation: auto;
}

/* ==========================================================================
   NexiBook Public Skin — Mobile Responsive Rules
   Purpose: Append after line 376 of /opt/insightful-dev/public/css/nexibook/public-skin.css
   Author: BUILDER (agent)
   Date: 2025-01-27
   
   INTEGRATION:
   Copy the contents of this file and APPEND to the END of
   /opt/insightful-dev/public/css/nexibook/public-skin.css
   (after line 376). Do NOT replace existing content.
   
   All selectors use body.nb prefix to match existing public-skin.css convention.
   No .nb-* class selectors are created — only standard Bootstrap, custom widget,
   and generic element selectors scoped under body.nb.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TABLET BREAKPOINT — ≤768px
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* --- Layout & Container --- */
  body.nb .container {
    padding-left: 16px;
    padding-right: 16px;
    max-width: 100%;
  }

  body.nb .hero-title {
    font-size: 2rem;
    line-height: 1.2;
  }

  body.nb .hero-subtitle {
    font-size: 1.1rem;
    line-height: 1.4;
  }

  /* --- Navbar --- */
  body.nb .navbar {
    padding: 0.5rem 12px;
  }

  body.nb .navbar .container {
    padding-left: 8px;
    padding-right: 8px;
  }

  body.nb nav {
    -webkit-tap-highlight-color: transparent;
  }

  /* --- Cards --- */
  body.nb .card {
    margin-bottom: 1rem;
    border-radius: 12px;
  }

  body.nb .card-header {
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
  }

  body.nb .landing-card {
    margin-bottom: 1.25rem;
    border-radius: 14px;
  }

  /* --- Accordion --- */
  body.nb .accordion {
    margin-bottom: 1rem;
  }

  /* --- Calendar / Schedule --- */
  body.nb .calendar-container {
    border-radius: 12px;
    overflow: hidden;
  }

  body.nb .date-navigation {
    padding: 0.5rem 0.75rem;
    gap: 8px;
  }

  body.nb .date-display {
    font-size: 0.95rem;
  }

  body.nb .filters-header {
    padding: 0.75rem 1rem;
  }

  body.nb .header-content {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* --- Forms --- */
  body.nb .form-label {
    font-size: 0.875rem;
    margin-bottom: 0.3rem;
  }

  body.nb .form-control {
    font-size: 16px; /* Prevents iOS zoom on focus */
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
  }

  body.nb select.form-control {
    height: auto;
    padding: 0.6rem 0.75rem;
  }

  body.nb textarea.form-control {
    min-height: 100px;
  }

  /* --- Buttons --- */
  body.nb .btn {
    padding: 0.55rem 1.25rem;
    border-radius: 10px;
    font-size: 0.95rem;
    min-height: 44px; /* Apple HIG tap target */
    min-width: 44px;
  }

  body.nb .btn-primary {
    padding: 0.6rem 1.5rem;
  }

  body.nb .btn-close {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* --- Grid --- */
  body.nb .col-12 {
    padding-left: 8px;
    padding-right: 8px;
  }

  body.nb .col-md-6,
  body.nb .col-lg-4,
  body.nb .col-lg-6,
  body.nb .col-lg-8 {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* --- Typography --- */
  body.nb h1 { font-size: 1.85rem; }
  body.nb h2 { font-size: 1.55rem; }
  body.nb h3 { font-size: 1.3rem; }
  body.nb h4 { font-size: 1.1rem; }
  body.nb h5 { font-size: 1rem; }
  body.nb h6 { font-size: 0.9rem; }

  body.nb p {
    font-size: 0.95rem;
    line-height: 1.55;
  }

  /* --- Tables --- */
  body.nb table {
    font-size: 0.875rem;
  }

  body.nb table th,
  body.nb table td {
    padding: 0.5rem 0.4rem;
  }

  /* --- Footer --- */
  body.nb footer {
    padding: 2rem 0 1.5rem;
  }

  body.nb .footer-row {
    flex-direction: column;
    gap: 1.25rem;
    text-align: center;
  }

  /* --- Sections --- */
  body.nb section {
    padding: 2.5rem 0;
  }

  body.nb article {
    padding: 1.5rem 0;
  }

  /* --- Images --- */
  body.nb img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
  }

  /* --- Lists --- */
  body.nb ul,
  body.nb ol {
    padding-left: 1.25rem;
  }

  body.nb li {
    margin-bottom: 0.35rem;
    font-size: 0.95rem;
  }
}

/* --------------------------------------------------------------------------
   2. LARGE PHONE BREAKPOINT — ≤480px
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  /* --- Layout & Container --- */
  body.nb .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  body.nb .hero-title {
    font-size: 1.65rem;
    letter-spacing: -0.01em;
  }

  body.nb .hero-subtitle {
    font-size: 1rem;
  }

  /* --- Navbar --- */
  body.nb .navbar {
    padding: 0.4rem 8px;
  }

  body.nb .navbar .container {
    padding-left: 4px;
    padding-right: 4px;
  }

  /* --- Cards --- */
  body.nb .card {
    margin-bottom: 0.75rem;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  body.nb .card-header {
    padding: 0.6rem 0.85rem;
    font-size: 0.9rem;
  }

  body.nb .landing-card {
    margin-bottom: 1rem;
    border-radius: 12px;
  }

  /* --- Calendar / Schedule --- */
  body.nb .calendar-container {
    border-radius: 10px;
    margin: 0 -4px;
  }

  body.nb .date-navigation {
    padding: 0.4rem 0.5rem;
    gap: 4px;
  }

  body.nb .date-display {
    font-size: 0.875rem;
  }

  body.nb .filters-header {
    padding: 0.5rem 0.75rem;
  }

  body.nb .header-content {
    flex-direction: column;
    align-items: stretch;
  }

  /* --- Forms --- */
  body.nb .form-control {
    font-size: 16px;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
  }

  body.nb select.form-control {
    padding-right: 2rem;
  }

  body.nb textarea.form-control {
    min-height: 80px;
  }

  /* --- Buttons --- */
  body.nb .btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    border-radius: 8px;
    width: 100%;
    min-height: 46px;
  }

  body.nb .btn-primary {
    font-weight: 600;
  }

  /* Inline button group: prevent full-width inside btn-groups */
  body.nb .btn-group .btn {
    width: auto;
  }

  body.nb .btn-close {
    width: 44px;
    height: 44px;
    border-radius: 50%;
  }

  /* --- Grid --- */
  body.nb .col-12,
  body.nb .col-md-6,
  body.nb .col-lg-4,
  body.nb .col-lg-6,
  body.nb .col-lg-8 {
    padding-left: 6px;
    padding-right: 6px;
  }

  /* --- Typography --- */
  body.nb h1 { font-size: 1.55rem; }
  body.nb h2 { font-size: 1.35rem; }
  body.nb h3 { font-size: 1.15rem; }
  body.nb h4 { font-size: 1rem; }
  body.nb h5 { font-size: 0.9rem; }
  body.nb h6 { font-size: 0.85rem; }

  body.nb p {
    font-size: 0.9rem;
    line-height: 1.5;
  }

  body.nb a {
    word-break: break-word;
  }

  /* --- Tables: horizontal scroll --- */
  body.nb table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.825rem;
  }

  body.nb table th,
  body.nb table td {
    padding: 0.4rem 0.3rem;
    white-space: nowrap;
  }

  /* --- Footer --- */
  body.nb footer {
    padding: 1.5rem 0 1rem;
  }

  body.nb .footer-row {
    gap: 1rem;
  }

  /* --- Sections --- */
  body.nb section {
    padding: 2rem 0;
  }

  body.nb article {
    padding: 1rem 0;
  }

  /* --- Images --- */
  body.nb img {
    border-radius: 8px;
  }

  /* --- Lists --- */
  body.nb ul,
  body.nb ol {
    padding-left: 1rem;
  }

  body.nb li {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
  }

  /* --- Inputs --- */
  body.nb input,
  body.nb select,
  body.nb textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  /* --- Accordion --- */
  body.nb .accordion {
    margin-bottom: 0.75rem;
  }

  /* --- Staggered fade-in animation (adapted from customer-skin) --- */
  @keyframes staggerFadeIn {
    0% {
      opacity: 0;
      transform: translateY(12px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  body.nb .landing-card {
    animation: staggerFadeIn 0.4s ease-out both;
  }

  body.nb .landing-card:nth-child(1) { animation-delay: 0.05s; }
  body.nb .landing-card:nth-child(2) { animation-delay: 0.1s; }
  body.nb .landing-card:nth-child(3) { animation-delay: 0.15s; }
  body.nb .landing-card:nth-child(4) { animation-delay: 0.2s; }
  body.nb .landing-card:nth-child(5) { animation-delay: 0.25s; }
  body.nb .landing-card:nth-child(6) { animation-delay: 0.3s; }
  body.nb .landing-card:nth-child(7) { animation-delay: 0.35s; }
  body.nb .landing-card:nth-child(8) { animation-delay: 0.4s; }
}

/* --------------------------------------------------------------------------
   3. STANDARD iPHONE BREAKPOINT — ≤430px
   -------------------------------------------------------------------------- */
@media (max-width: 430px) {
  body.nb .container {
    padding-left: 10px;
    padding-right: 10px;
  }

  body.nb .hero-title {
    font-size: 1.45rem;
  }

  body.nb .hero-subtitle {
    font-size: 0.9rem;
  }

  body.nb .navbar {
    padding: 0.35rem 6px;
  }

  body.nb .card {
    border-radius: 8px;
    margin-bottom: 0.6rem;
  }

  body.nb .card-header {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
  }

  body.nb .landing-card {
    border-radius: 10px;
  }

  body.nb .calendar-container {
    border-radius: 8px;
  }

  body.nb .date-navigation {
    padding: 0.35rem 0.4rem;
  }

  body.nb .date-display {
    font-size: 0.85rem;
  }

  body.nb .filters-header {
    padding: 0.45rem 0.65rem;
    font-size: 0.85rem;
  }

  body.nb .btn {
    font-size: 0.875rem;
    border-radius: 8px;
    min-height: 44px;
  }

  body.nb .form-control {
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
  }

  body.nb h1 { font-size: 1.4rem; }
  body.nb h2 { font-size: 1.25rem; }
  body.nb h3 { font-size: 1.05rem; }
  body.nb p { font-size: 0.875rem; }

  body.nb section {
    padding: 1.5rem 0;
  }

  body.nb footer {
    padding: 1.25rem 0 0.75rem;
    font-size: 0.8rem;
  }

  body.nb .footer-row {
    gap: 0.75rem;
  }

  body.nb .col-12,
  body.nb .col-md-6,
  body.nb .col-lg-4,
  body.nb .col-lg-6,
  body.nb .col-lg-8 {
    padding-left: 4px;
    padding-right: 4px;
  }
}

/* --------------------------------------------------------------------------
   4. SMALL PHONE BREAKPOINT — ≤375px
   -------------------------------------------------------------------------- */
@media (max-width: 375px) {
  body.nb .container {
    padding-left: 8px;
    padding-right: 8px;
  }

  body.nb .hero-title {
    font-size: 1.3rem;
  }

  body.nb .hero-subtitle {
    font-size: 0.85rem;
  }

  body.nb .navbar {
    padding: 0.3rem 4px;
    font-size: 0.85rem;
  }

  body.nb .card {
    border-radius: 8px;
    margin-bottom: 0.5rem;
  }

  body.nb .card-header {
    padding: 0.45rem 0.65rem;
    font-size: 0.825rem;
  }

  body.nb .landing-card {
    border-radius: 8px;
    margin-bottom: 0.75rem;
  }

  body.nb .calendar-container {
    border-radius: 8px;
  }

  body.nb .date-navigation {
    padding: 0.3rem 0.35rem;
    gap: 2px;
  }

  body.nb .date-display {
    font-size: 0.8rem;
  }

  body.nb .filters-header {
    padding: 0.4rem 0.5rem;
    font-size: 0.8rem;
  }

  body.nb .btn {
    font-size: 0.85rem;
    padding: 0.45rem 0.85rem;
    min-height: 44px;
  }

  body.nb .btn-primary {
    padding: 0.5rem 1rem;
  }

  body.nb .form-control {
    padding: 0.45rem 0.55rem;
    font-size: 16px; /* Keep 16px to prevent iOS zoom */
    border-radius: 6px;
  }

  body.nb .form-label {
    font-size: 0.8rem;
  }

  body.nb h1 { font-size: 1.25rem; }
  body.nb h2 { font-size: 1.1rem; }
  body.nb h3 { font-size: 1rem; }
  body.nb h4 { font-size: 0.9rem; }
  body.nb p { font-size: 0.85rem; }

  body.nb section {
    padding: 1.25rem 0;
  }

  body.nb article {
    padding: 0.75rem 0;
  }

  body.nb footer {
    padding: 1rem 0 0.5rem;
    font-size: 0.75rem;
  }

  body.nb .footer-row {
    gap: 0.5rem;
  }

  body.nb .col-12,
  body.nb .col-md-6,
  body.nb .col-lg-4,
  body.nb .col-lg-6,
  body.nb .col-lg-8 {
    padding-left: 3px;
    padding-right: 3px;
  }

  body.nb ul,
  body.nb ol {
    padding-left: 0.85rem;
  }

  body.nb li {
    font-size: 0.85rem;
  }

  body.nb img {
    border-radius: 6px;
  }

  /* Compact accordion on very small screens */
  body.nb .accordion .card-header {
    padding: 0.4rem 0.5rem;
  }
}

/* --------------------------------------------------------------------------
   5. TINY PHONE BREAKPOINT — ≤320px
   -------------------------------------------------------------------------- */
@media (max-width: 320px) {
  body.nb .container {
    padding-left: 6px;
    padding-right: 6px;
  }

  body.nb .hero-title {
    font-size: 1.15rem;
  }

  body.nb .hero-subtitle {
    font-size: 0.8rem;
  }

  body.nb .navbar {
    padding: 0.25rem 2px;
    font-size: 0.8rem;
  }

  body.nb .card {
    border-radius: 6px;
    margin-bottom: 0.4rem;
  }

  body.nb .card-header {
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
  }

  body.nb .landing-card {
    border-radius: 6px;
    margin-bottom: 0.5rem;
  }

  body.nb .calendar-container {
    border-radius: 6px;
  }

  body.nb .date-navigation {
    padding: 0.25rem 0.25rem;
    gap: 0;
  }

  body.nb .date-display {
    font-size: 0.75rem;
  }

  body.nb .filters-header {
    padding: 0.35rem 0.4rem;
    font-size: 0.75rem;
  }

  body.nb .btn {
    font-size: 0.825rem;
    padding: 0.4rem 0.75rem;
    min-height: 42px;
  }

  body.nb .form-control {
    padding: 0.4rem 0.5rem;
    font-size: 16px;
    border-radius: 6px;
  }

  body.nb h1 { font-size: 1.1rem; }
  body.nb h2 { font-size: 1rem; }
  body.nb h3 { font-size: 0.9rem; }
  body.nb h4 { font-size: 0.85rem; }
  body.nb p { font-size: 0.8rem; line-height: 1.45; }

  body.nb section {
    padding: 1rem 0;
  }

  body.nb footer {
    padding: 0.75rem 0 0.5rem;
    font-size: 0.7rem;
  }

  body.nb .col-12,
  body.nb .col-md-6,
  body.nb .col-lg-4,
  body.nb .col-lg-6,
  body.nb .col-lg-8 {
    padding-left: 2px;
    padding-right: 2px;
  }
}

/* --------------------------------------------------------------------------
   6. TOUCH DEVICE OVERRIDES — (hover: none)
   Adapted from customer-skin.css patterns
   -------------------------------------------------------------------------- */
@media (hover: none) {
  /* Remove hover-dependent effects on touch devices */
  body.nb .btn:hover,
  body.nb .btn-primary:hover,
  body.nb a:hover,
  body.nb .card:hover,
  body.nb .landing-card:hover {
    transform: none;
    box-shadow: inherit;
  }

  /* Prevent sticky hover states on touch */
  body.nb .btn:focus,
  body.nb .btn-primary:focus,
  body.nb a:focus {
    outline: 2px solid rgba(59, 130, 246, 0.5);
    outline-offset: 2px;
  }

  /* Disable tap highlight on interactive elements */
  body.nb .btn,
  body.nb .btn-primary,
  body.nb .btn-close,
  body.nb a,
  body.nb button,
  body.nb select,
  body.nb input,
  body.nb textarea,
  body.nb nav,
  body.nb .navbar,
  body.nb .card,
  body.nb .landing-card,
  body.nb .accordion {
    -webkit-tap-highlight-color: transparent;
  }

  /* Overscroll behavior — prevent pull-to-refresh interference */
  body.nb {
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Larger touch targets for links */
  body.nb a {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }

  /* Ensure table cells don't collapse on touch scroll */
  body.nb table {
    -webkit-overflow-scrolling: touch;
  }
}

/* --------------------------------------------------------------------------
   7. ACTIVE / PRESSED STATES FOR TOUCH
   Provide clear visual feedback when finger is pressing
   -------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {

  /* Eliminate 300ms tap delay on all interactive elements */
  body.nb a,
  body.nb button,
  body.nb .btn,
  body.nb .btn-primary,
  body.nb .btn-close,
  body.nb [role="button"],
  body.nb input[type="submit"],
  body.nb input[type="button"],
  body.nb .card,
  body.nb .landing-card,
  body.nb .accordion-button,
  body.nb .calendar-container {
    touch-action: manipulation;
  }

  body.nb .btn:active,
  body.nb .btn-primary:active {
    transform: scale(0.97);
    opacity: 0.85;
    transition: transform 0.1s ease, opacity 0.1s ease;
  }

  body.nb a:active {
    opacity: 0.7;
    transition: opacity 0.1s ease;
  }

  body.nb .card:active,
  body.nb .landing-card:active {
    opacity: 0.92;
    transition: opacity 0.1s ease;
  }

  body.nb .btn-close:active {
    transform: scale(0.9);
    transition: transform 0.1s ease;
  }
}

/* Also provide :active feedback for pointer devices at mobile widths */
@media (max-width: 768px) {
  body.nb .btn:active,
  body.nb .btn-primary:active {
    transform: scale(0.97);
    opacity: 0.85;
    transition: transform 0.1s ease, opacity 0.1s ease;
  }

  body.nb a:active {
    opacity: 0.7;
  }

  body.nb .btn-close:active {
    transform: scale(0.9);
  }
}

/* --------------------------------------------------------------------------
   8. SAFE AREA INSETS — Notched devices (iPhone X+)
   Adapted from customer-skin.css safe-area patterns
   -------------------------------------------------------------------------- */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  body.nb .navbar {
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }

  body.nb footer {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }

  body.nb .container {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  body.nb .btn {
    padding-bottom: max(0.5rem, calc(env(safe-area-inset-bottom) / 4));
  }

  body.nb .btn-primary {
    padding-bottom: max(0.55rem, calc(env(safe-area-inset-bottom) / 4));
  }

  /* Sticky bottom bars / fixed elements need full safe area */
  body.nb .filters-header {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  body.nb .date-navigation {
    padding-left: max(0.5rem, env(safe-area-inset-left));
    padding-right: max(0.5rem, env(safe-area-inset-right));
  }
}

/* Safe area for top notch — status bar area */
@supports (padding-top: env(safe-area-inset-top)) {
  body.nb .navbar {
    padding-top: max(0.5rem, env(safe-area-inset-top));
  }

  body.nb .hero-title,
  body.nb .hero-subtitle {
    /* Ensure hero content clears the notch area */
    margin-top: max(0, env(safe-area-inset-top));
  }
}

/* --------------------------------------------------------------------------
   9. LANDSCAPE ORIENTATION ADJUSTMENTS
   -------------------------------------------------------------------------- */
@media (max-width: 768px) and (orientation: landscape) {
  body.nb .hero-title {
    font-size: 1.5rem;
  }

  body.nb .hero-subtitle {
    font-size: 0.95rem;
  }

  body.nb section {
    padding: 1.25rem 0;
  }

  body.nb .navbar {
    min-height: 44px;
  }

  /* Prevent content from being too compressed vertically */
  body.nb .card {
    margin-bottom: 0.5rem;
  }

  body.nb .landing-card {
    margin-bottom: 0.75rem;
  }

  body.nb footer {
    padding: 1rem 0 0.75rem;
  }
}

/* --------------------------------------------------------------------------
   10. REDUCED MOTION — Accessibility
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.nb .landing-card,
  body.nb .card,
  body.nb .btn,
  body.nb .btn-primary,
  body.nb .btn-close,
  body.nb a,
  body.nb .hero-title,
  body.nb .hero-subtitle {
    animation: none !important;
    transition: none !important;
  }

  body.nb .landing-card:nth-child(n) {
    animation-delay: 0s !important;
  }
}

/* --------------------------------------------------------------------------
   11. HIGH CONTRAST — Accessibility
   -------------------------------------------------------------------------- */
@media (prefers-contrast: high) {
  body.nb .btn {
    border: 2px solid currentColor;
  }

  body.nb .btn-primary {
    border: 2px solid currentColor;
  }

  body.nb .card {
    border: 2px solid rgba(0, 0, 0, 0.25);
  }

  body.nb .landing-card {
    border: 2px solid rgba(0, 0, 0, 0.2);
  }

  body.nb .form-control {
    border: 2px solid rgba(0, 0, 0, 0.4);
  }

  body.nb a {
    text-decoration: underline;
  }
}

/* --------------------------------------------------------------------------
   12. PRINT STYLES — Clean output for printing
   -------------------------------------------------------------------------- */
@media print {
  body.nb .navbar,
  body.nb .btn,
  body.nb .btn-primary,
  body.nb .btn-close,
  body.nb .date-navigation,
  body.nb .filters-header {
    display: none !important;
  }

  body.nb .container {
    max-width: 100%;
    padding: 0;
  }

  body.nb .card,
  body.nb .landing-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }

  body.nb .hero-title {
    font-size: 1.5rem;
  }

  body.nb footer {
    padding: 0.5rem 0;
    border-top: 1px solid #ccc;
  }
}