/* =============================================================================
   CloudMill ERP — UI/UX fixes
   Loaded AFTER style.css so it can override. Kept in its own file so the
   original stylesheet stays untouched and these changes are easy to review,
   merge or roll back.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. MODULE TABS — were horizontally scrollable below 860px with no affordance,
      so Production, HR & Payroll and CRM were invisible on a phone. The labels
      are short, so wrapping shows all six.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .tabs {
    flex-wrap: wrap;
    overflow-x: visible;
    justify-content: center;
    max-width: 100%;
  }
  .tab { white-space: nowrap; }
}

/* -----------------------------------------------------------------------------
   2. WIDE TABLES — table.compare has min-width:640px, so on a phone the right
      hand columns sat outside the scroll container with nothing to indicate
      they existed. These are the classic CSS scroll shadows: they appear only
      when there is more to scroll to, and disappear at each end.
   -------------------------------------------------------------------------- */
.compare-wrap {
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(255, 255, 255, 0), var(--surface) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, 0.14), rgba(15, 23, 42, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, 0.14), rgba(15, 23, 42, 0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 15px 100%, 15px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* -----------------------------------------------------------------------------
   3. KEY/VALUE TABLES — the worked-example and reports tables on the industry
      pages are two columns. Inheriting min-width:640px meant that on a phone
      only the label column was visible: every figure was off-screen. They now
      stack label-over-value below 700px and never scroll sideways.
   -------------------------------------------------------------------------- */
table.compare--stack th,
table.compare--stack td { text-align: left; }

/* Figures read better right-aligned and in tabular numerals on wider screens */
@media (min-width: 701px) {
  table.compare--num td {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text);
  }
  table.compare--num thead th:not(:first-child) { text-align: right; }
}

@media (max-width: 700px) {
  .compare-wrap--stack {
    overflow-x: visible;
    background: none;
  }
  table.compare--stack {
    min-width: 0;
    width: 100%;
    display: block;
  }
  table.compare--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  table.compare--stack tbody { display: block; }
  table.compare--stack tr {
    display: block;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
  }
  table.compare--stack tr:last-child { border-bottom: 0; }
  table.compare--stack tr:nth-child(odd) { background: var(--ink-25); }
  table.compare--stack th,
  table.compare--stack td {
    display: block;
    border: 0;
    padding: 0;
    text-align: left;
  }
  table.compare--stack th {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: 600;
  }
  table.compare--stack td {
    font-size: var(--text-base);
    color: var(--text);
    font-weight: 600;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
  }
  /* Rows the page marks as totals keep their emphasis when stacked */
  table.compare--stack th strong { color: var(--text); }
}

/* -----------------------------------------------------------------------------
   4. TAP TARGETS — footer, top bar and legal links rendered 16–23px tall on a
      phone, well under the ~44px comfortable minimum. Padding is added only at
      small widths so desktop spacing is unchanged.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .footer-col ul a,
  .site-footer .footer-contact a,
  .footer-legal a,
  .topbar-list a {
    display: inline-block;
    padding-block: 8px;
  }
  .footer-col ul { gap: var(--space-1); }
  /* Four legal links in one row overflowed a 390px screen — the last one sat
     under the back-to-top button. */
  .footer-legal { gap: var(--space-4); flex-wrap: wrap; justify-content: center; }
  .footer-bottom { text-align: center; }
  /* The floating back-to-top button sits over the last legal link on a phone.
     Reserve room for it at the end of the page. */
  .site-footer { padding-bottom: 76px; }
  .breadcrumbs a { display: inline-block; padding-block: 6px; }
}

/* -----------------------------------------------------------------------------
   5. LONG HEADINGS — the industry pages carry descriptive H2s that ran to five
      or six lines on a 390px screen. Slightly tighter scaling on small widths
      keeps them readable without shortening the copy.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .section-head h2 { font-size: clamp(1.5rem, 1.1rem + 2.6vw, 1.9rem); }
  .pagehead h1 { font-size: clamp(1.75rem, 1.2rem + 3.6vw, 2.25rem); }
}

/* -----------------------------------------------------------------------------
   6. MEGA MENU — .mega-title / .mega-desc are inline spans in style.css, so the
      title and description ran together on one line.
   -------------------------------------------------------------------------- */
.mega-title,
.mega-desc { display: block; }

/* -----------------------------------------------------------------------------
   7. MOBILE DRAWER — industry links are secondary to the main nav items.
   -------------------------------------------------------------------------- */
.drawer-sub-head {
  margin: var(--space-5) 0 var(--space-1);
  padding: 0 14px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.drawer-nav a.drawer-sub {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-muted);
}

/* -----------------------------------------------------------------------------
   8. FOOTER CONTACT — the block moved under the brand column (the grid is four
      columns; a fifth wrapped to its own row), so it needs the column styling
      it used to inherit from .footer-col.
   -------------------------------------------------------------------------- */
.footer-contact-head {
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin: var(--space-8) 0 var(--space-5);
}
.site-footer .footer-contact { display: grid; gap: var(--space-4); }
.site-footer .footer-contact a { color: var(--ink-300); transition: color var(--dur) var(--ease-out); }
.site-footer .footer-contact a:hover { color: #fff; }

/* -----------------------------------------------------------------------------
   9. INDUSTRY PAGE LAYOUT — .container--narrow only sets max-width in style.css,
      so narrow blocks were left-aligned rather than centred.
   -------------------------------------------------------------------------- */
.ind-narrow { max-width: var(--container-narrow); margin-inline: auto; }
.ind-narrow > p { font-size: var(--text-lg); line-height: 1.75; }
/* style.css resets paragraph margins, so the problem-statement paragraphs ran
   together as one block of text. */
.ind-narrow > p + p { margin-top: var(--space-5); }
.ind-note { max-width: 46rem; margin-inline: auto; color: var(--text-muted); }

/* -----------------------------------------------------------------------------
   10. WIDE-TABLE HINT — the plan comparison is genuinely four columns, so it
       still scrolls sideways on a phone. The scroll shadows above signal that
       visually; this line says it in words. Hidden once the table fits.
   -------------------------------------------------------------------------- */
.table-hint { display: none; }
@media (max-width: 860px) {
  .table-hint {
    display: block;
    margin: var(--space-10) 0 calc(var(--space-4) * -1);
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-align: center;
  }
  .table-hint + .compare-wrap { margin-top: var(--space-6); }
}

/* -----------------------------------------------------------------------------
   11. REMAINING TAP TARGETS — the hero slider dots were 10x10px, which is very
       hard to hit on a phone. The visible dot keeps its size; only the hit area
       grows (content-box padding with the background clipped to the content).
   -------------------------------------------------------------------------- */
/* (Hero slider dots are styled in index.php, where their rules live.) */

@media (max-width: 860px) {
  /* Inline phone/email links on the contact page are things people tap */
  .info-item p a { display: inline-block; padding-block: 6px; }
  /* Text CTAs inside body copy */
  .link-arrow { display: inline-flex; align-items: center; padding-block: 8px; }
  /* Sticky-header buttons. NOTE: do not set `display` here — style.css hides
     .nav-actions .btn--secondary below 1080px and an override would bring the
     second button back and push the menu toggle off-screen. */
  .nav-actions .btn--sm { min-height: 40px; }
}