/* =========================================================
   hlg-mobile.css — Hyde Legacy Group mobile foundation
   Shared across all public pages. Safe to edit in one place.
   ========================================================= */

/* Always-on fixes (all screen sizes) */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  overflow-x: hidden;
}

/* Proper tap highlight color for all interactive elements */
a, button, input, select, textarea, [role="button"], [onclick] {
  -webkit-tap-highlight-color: rgba(42, 100, 59, 0.15);
}

/* Remove the 300ms tap delay on all buttons/links */
a, button, [role="button"] {
  touch-action: manipulation;
}

/* =========================================================
   Mobile-only rules (phones + small tablets)
   ========================================================= */
@media (max-width: 768px) {
  /* Prevent iOS Safari from zooming when inputs are focused
     (requires font-size >= 16px on the input) */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input:not([type]),
  textarea,
  select {
    font-size: 16px !important;
  }

  /* Minimum tap target sizes (Apple HIG: 44x44) */
  button,
  .btn,
  a.btn,
  input[type="button"],
  input[type="submit"],
  [role="button"] {
    min-height: 44px;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Forms: full-width inputs on mobile, breathable spacing */
  input, select, textarea {
    width: 100%;
    box-sizing: border-box;
  }
  form label {
    display: block;
    margin-bottom: 6px;
  }

  /* Modals / dialogs fit the screen */
  .modal, .dialog, [class*="modal-content"], [class*="dialog-content"] {
    max-width: 95vw !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }

  /* Tables get horizontal scroll instead of breaking layout */
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Hero sections: prevent text-overflow chopping */
  h1, h2, h3 {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Generic grid-to-stack fallback for anything hard-coded to multi-column */
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Inline flex rows that assume desktop width */
  [style*="display: flex"][style*="gap: 40px"],
  [style*="display:flex"][style*="gap:40px"],
  [style*="display: flex"][style*="gap: 48px"],
  [style*="display:flex"][style*="gap:48px"] {
    flex-wrap: wrap !important;
    gap: 20px !important;
  }

  /* Hide horizontal scrollbars on tiny screens (caused by wide banners) */
  body { overscroll-behavior-y: contain; }
}

/* =========================================================
   Extra small phones (iPhone SE, older Androids)
   ========================================================= */
@media (max-width: 380px) {
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:repeat(2"] {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   PWA Install Button (portal pages only)
   ========================================================= */
#hlg-install-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: linear-gradient(135deg, #2a643b 0%, #1a4528 100%);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(42, 100, 59, 0.35), 0 2px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  letter-spacing: 0.2px;
  animation: hlgInstallPulse 2.4s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}
#hlg-install-btn:active { transform: scale(0.96); }
#hlg-install-btn .hlg-install-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  font-size: 16px;
  line-height: 1;
  font-weight: 400;
}
@keyframes hlgInstallPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(42, 100, 59, 0.35), 0 2px 6px rgba(0, 0, 0, 0.1); }
  50%      { box-shadow: 0 8px 30px rgba(42, 100, 59, 0.55), 0 2px 8px rgba(0, 0, 0, 0.14); }
}

/* Hide install button when running as installed app */
@media (display-mode: standalone) {
  #hlg-install-btn { display: none !important; }
}

/* Shrink and re-center the install button on phones so it doesn't cover cards */
@media (max-width: 768px) {
  #hlg-install-btn {
    bottom: 14px !important;
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%);
    padding: 9px 16px !important;
    font-size: 13px !important;
    opacity: 0.94;
  }
  #hlg-install-btn:active { transform: translateX(-50%) scale(0.96); }
  #hlg-install-btn .hlg-install-close {
    width: 18px;
    height: 18px;
    margin-left: 4px;
    font-size: 14px;
  }
}

/* =========================================================
   PORTAL MOBILE POLISH
   - Center card body text inside portal dashboard cards
   - Header: swap "Log Out" text for an icon on phones
   ========================================================= */
@media (max-width: 768px) {
  /* Center all resource/blog-style cards' body content on mobile.
     Using multiple selectors + tag forms to beat any inline overrides. */
  .blog-card,
  .blog-card .blog-body,
  .blog-card .blog-body > *,
  .blog-card .blog-body h1,
  .blog-card .blog-body h2,
  .blog-card .blog-body h3,
  .blog-card .blog-body h4,
  .blog-card .blog-body p,
  .blog-card .blog-body span,
  .blog-card .blog-body div,
  .blog-card .blog-body .blog-tag,
  .blog-card .blog-body .card-link,
  a.blog-card,
  a.blog-card .blog-body {
    text-align: center !important;
  }
  .blog-card .blog-body .card-link {
    display: inline-block !important;
  }
  /* Also center the generic .card content body (the Contact/Document/Link Accounts row) */
  .card:not([style*="text-align"]) {
    text-align: center !important;
  }

  /* Keep the portal nav tight — phone screens were getting jumbled */
  .nav-btn-login,
  .nav-btn-signup {
    padding: 7px 12px !important;
    font-size: 12px !important;
  }

  /* Logout button: hide the text, show the icon */
  .nav-btn-signup .nav-logout-text { display: none !important; }
  .nav-btn-signup .nav-logout-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
  }
  .nav-btn-signup {
    padding: 8px 10px !important;
    min-width: 38px;
    min-height: 38px;
    justify-content: center;
    display: inline-flex !important;
    align-items: center;
  }
}
/* Desktop: icon hidden, text shown (default) */
.nav-btn-signup .nav-logout-icon { display: none; }

/* =========================================================
   PORTAL BOTTOM NAVIGATION BAR (iOS-style)
   Sticky dock at bottom on portal pages. Respects safe-area.
   ========================================================= */
.portal-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: var(--white);
  border-top: 1px solid var(--gray-100);
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  padding-top: 8px;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
}
.portal-bottom-nav a,
.portal-bottom-nav button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--gray-500);
  font-size: 11px;
  font-weight: 500;
  border: none;
  background: none;
  cursor: pointer;
  transition: color 0.2s;
  flex: 1;
  min-height: 60px;
  justify-content: center;
}
.portal-bottom-nav a:hover,
.portal-bottom-nav button:hover,
.portal-bottom-nav a.active,
.portal-bottom-nav button.active {
  color: var(--green);
}
.portal-bottom-nav svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.5;
  stroke: currentColor;
  fill: none;
}

/* Add padding to page when bottom nav is present */
.page-with-bottom-nav {
  padding-bottom: calc(60px + env(safe-area-inset-bottom));
}

/* =========================================================
   BACK BUTTONS & EXIT PATHS
   Ensure all drilled-in views have clear navigation
   ========================================================= */
.back-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  color: var(--green);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  background: none;
  border: none;
  margin-bottom: 16px;
  transition: all 0.2s;
}
.back-button:hover {
  color: var(--green-dark);
  transform: translateX(-2px);
}
.back-button svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* Modal close button as X in top-right */
.modal-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  transition: color 0.2s;
  z-index: 1001;
}
.modal-close-btn:hover {
  color: var(--gray-900);
}

/* =========================================================
   MODAL IMPROVEMENTS FOR MOBILE
   Full-screen modals on phones, proper dismissal paths
   ========================================================= */
@media (max-width: 768px) {
  .modal,
  .dialog,
  [role="dialog"] {
    position: fixed;
    inset: 0;
    z-index: 2000 !important;
    background: rgba(0,0,0,0.5) !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  .modal-content,
  .dialog-content,
  [role="dialog"] > div:first-child {
    background: var(--white) !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 24px 20px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* Safe-area insets for fixed top bars */
.top-app-bar {
  padding-top: env(safe-area-inset-top);
}

/* =========================================================
   PORTAL MOBILE — Section Centering (below-fold)
   Announcements, Case Studies, Tutorials, etc. — these sections
   have .section-pad wrappers with heading + paragraph that default
   to left-aligned on desktop. On mobile, center the headings +
   lead paragraphs without disturbing nested card layouts.
   ========================================================= */
@media (max-width: 768px) {
  /* Surgical: only direct-child headings, eyebrows, and lead paragraphs.
     Does NOT cascade into nested cards, grids, or flex rows. */
  .section-pad > .section-eyebrow,
  .section-pad > .section-title,
  .section-pad > h1:not([style*="text-align"]),
  .section-pad > h2:not([style*="text-align"]),
  .section-pad > h3:not([style*="text-align"]),
  .section-pad > p:not([style*="text-align"]) {
    text-align: center !important;
  }
  /* Constrained lead paragraphs (max-width set) need auto margins to center the block */
  .section-pad > p[style*="max-width"]:not([style*="text-align"]) {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Center the section-eyebrow pill as a block */
  .section-pad > .section-eyebrow {
    margin-left: auto !important;
    margin-right: auto !important;
    display: inline-block !important;
  }
  .section-pad > .section-eyebrow + .section-title,
  .section-pad > .section-title {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Also wrap section-pad content so the inline-block eyebrow centers */
  section > .section-pad:not([style*="text-align"]) {
    text-align: center;
  }
  /* But UNDO that cascade inside cards / grids / flex rows that live in the section */
  section > .section-pad .card,
  section > .section-pad .blog-card,
  section > .section-pad [style*="display:flex"],
  section > .section-pad [style*="display: flex"],
  section > .section-pad [style*="display:grid"],
  section > .section-pad [style*="display: grid"] {
    text-align: initial;
  }
  /* Re-apply center ONLY for blog-card bodies (handled earlier in this file) */
  .blog-card .blog-body,
  .blog-card .blog-body > * {
    text-align: center !important;
  }
}

/* iOS install instructions modal */
#hlg-ios-install {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(17, 24, 39, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  animation: hlgIosFade 0.25s ease-out;
}
#hlg-ios-install .hlg-ios-install-card {
  background: #fff;
  border-radius: 20px 20px 12px 12px;
  padding: 24px 22px 22px;
  max-width: 420px;
  width: 100%;
  font-family: 'Outfit', -apple-system, sans-serif;
  color: #111827;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.2);
}
#hlg-ios-install h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: #2a643b;
}
#hlg-ios-install p { margin: 0 0 12px; color: #374151; font-size: 14px; }
#hlg-ios-install ol { margin: 0 0 18px; padding-left: 20px; font-size: 14px; color: #374151; line-height: 1.7; }
#hlg-ios-install ol strong { color: #2a643b; }
#hlg-ios-install .hlg-ios-install-close {
  width: 100%;
  padding: 12px;
  background: #2a643b;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
@keyframes hlgIosFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* =========================================================
   Log Out button (used on all client-* and vault-* pages)
   The icon SVG has no intrinsic width/height, so without
   these rules it rendered at the SVG default (300x150)
   and blew the button out on narrow viewports.
   ========================================================= */
.nav-logout-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
.nav-logout-text {
  display: inline-block;
  white-space: nowrap;
  line-height: 1;
}
a.nav-btn-signup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  line-height: 1;
  min-height: 36px;
}
/* On narrow phones, collapse to an icon-only button so it never cuts off */
@media (max-width: 420px) {
  a.nav-btn-signup {
    padding: 8px 10px;
    min-width: 38px;
  }
  .nav-logout-text {
    display: none;
  }
  .nav-logout-icon {
    width: 18px;
    height: 18px;
  }
}