/* =============================================================================
   Ingolo Hosting HostBill theme | css/base.css
   PURPOSE: Element defaults, typography, utilities (.lead, .muted, .small, .sr-only), skip link, focus ring, eyebrow, reveal motion.
   WHERE USED: Store pages (homepage, Info Pages, cart/order pages) via the .ig wrapper; body.ingolo-store overrides the client-area Rubik font with Inter.
   DEPENDENCIES: css/variables.css.
   SAFE EDITS: Heading sizes, margins, link colour. Keep the :focus-visible outline and the .skip-link rules.
   TEST AFTER EDITING: Keyboard Tab from the top of the page shows the skip link; headings wrap at 320px; focus ring visible on links and buttons.
   SCOPE: storefront rules are prefixed with .ig (set on the header/footer chrome and
          <main> of store pages) so they never restyle HostBill's own client-area markup.
   ============================================================================= */

.ig *, .ig *::before, .ig *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.ingolo-store {
  margin: 0;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-body);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}
.ig img, .ig svg { display: block; max-width: 100%; }
.ig a { color: var(--color-link); text-decoration: none; }
.ig a:hover { text-decoration: underline; }
.ig h1, .ig h2, .ig h3, .ig h4 { color: var(--color-ink); line-height: var(--lh-tight); margin: 0 0 var(--space-2); }
.ig h1 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: var(--track-heading); }
.ig h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: var(--track-heading); }
.ig h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; }
.ig h4 { font-size: 1rem; font-weight: 700; }
.ig p { margin: 0 0 var(--space-2); }
.ig .lead { font-size: 1.125rem; color: var(--color-muted); max-width: 60ch; }
.ig .muted { color: var(--color-muted); }
.ig .small { font-size: var(--fs-small); }
.ig .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; }
.ig :focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; }
body.ingolo-store .skip-link { position: absolute; left: 16px; top: -48px; background: var(--color-ink); color: #fff; padding: 8px 14px; border-radius: var(--radius-btn); z-index: 100; }
body.ingolo-store .skip-link:focus { top: 16px; text-decoration: none; }

/* Eyebrow */
.ig .eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-2);
}
.ig .eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--color-primary); border-radius: 2px; }
.ig .section--dark .eyebrow { color: var(--color-on-dark-muted); }

/* Reveal motion */
/* Reveal motion */
.js .ig .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .ig .reveal.is-visible { opacity: 1; transform: none; }

/* The .ig wrapper itself inherits brand typography (main.ig, div.ig-chrome). */
.ig { font-family: var(--font-sans); color: var(--color-body); line-height: var(--lh-body); font-size: var(--fs-body); }
.ig p, .ig li, .ig td, .ig th, .ig label, .ig input, .ig select, .ig textarea, .ig button { font-family: var(--font-sans); }
.ig h1, .ig h2, .ig h3, .ig h4 { font-family: var(--font-sans); }
.ig ul, .ig ol { margin-top: 0; }
.ig-main:focus { outline: none; }

/* Neutralise properties the client-area bundle (dist/css/app.min.css) sets on class names the
   storefront shares (.row, .card, .label, .lead, .small, .badge, .nav, .btn, .table, .alert).
   Component rules later in components.css/layout.css set the real values. */
.ig .row { margin-left: 0; margin-right: 0; }
.ig .card { display: block; margin: 0; }
.ig .label { line-height: inherit; text-align: left; white-space: normal; padding: 0; text-transform: none; border-radius: 0; vertical-align: baseline; }
.ig .lead { font-weight: 400; }
.ig .small { font-weight: inherit; }
.ig .badge { border: 0; text-transform: none; line-height: 1.4; vertical-align: middle; }
.ig .nav { flex-wrap: nowrap; margin-bottom: 0; padding-left: 0; }
.ig .btn { white-space: normal; letter-spacing: normal; vertical-align: middle; }
.ig .table { margin-bottom: 0; color: inherit; }
.ig .table td, .ig .table th { border-top: 0; }
.ig .alert { margin-bottom: 0; }

/* Info Page / editor-entered content */
.ig .prose { max-width: 760px; }
.ig .prose h2 { font-size: 1.75rem; margin-top: var(--space-5); }
.ig .prose h3 { margin-top: var(--space-4); }
.ig .prose ul, .ig .prose ol { padding-left: 1.25rem; margin-bottom: var(--space-2); }
.ig .prose li + li { margin-top: 6px; }
.ig .prose a { text-decoration: underline; text-underline-offset: 2px; }
.ig .prose table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-3); }
.ig .prose th, .ig .prose td { border: 1px solid var(--color-border); padding: 10px 12px; text-align: left; }
.ig .prose img { height: auto; border-radius: var(--radius-sm); }
.ig .text-secondary { color: var(--color-muted); }