/* ══════════════════════════════════════════════════════════════
   CardForge — Responsive Base System v2
   Include in every CardForge site for consistent mobile behavior
   ══════════════════════════════════════════════════════════════ */

/* ─── Modern CSS Reset ───
   Based on Josh Comeau + Andy Bell patterns.
   Smooths font rendering, prevents overflow, balances text.
─── */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-behavior: smooth;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* Better text wrapping — professional typesetting without JS */
p, li, blockquote, figcaption {
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/* Prevent overflow of long words/URLs */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* Form elements inherit fonts from body */
input, button, textarea, select {
  font: inherit;
}

/* Media defaults — block display prevents gap below images */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ─── Keyboard Accessibility ───
   focus-visible shows ring only for keyboard users (not mouse clicks)
   WCAG 2.2 SC 2.4.11 Focus Not Obscured
─── */
:focus-visible {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 2px;
  border-radius: 4px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ─── Reduced Motion ───
   WCAG 2.2 SC 2.3.3 — respects OS accessibility setting
─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Fluid Typography Scale ───
   Uses clamp() so text scales smoothly between mobile and desktop.
   Reference: 1rem ≈ 16px at default browser size
   Scale: display → h1 → body → small → micro
─── */
:root {
  /* Master base: 16px on mobile, scales up to 17px on desktop */
  --text-base: clamp(0.95rem, 0.3vw + 0.9rem, 1rem);

  /* Fluid type scale */
  --text-display:  clamp(1.75rem, 4vw,     3rem);      /* Page hero H1 */
  --text-h1:       clamp(1.5rem,  3vw,     2.2rem);    /* Section H1 */
  --text-h2:       clamp(1.15rem, 2.5vw,   1.8rem);    /* Section H2 */
  --text-h3:       clamp(1rem,    2vw,     1.3rem);    /* Card H3 */
  --text-h4:       clamp(0.9rem,  1.5vw,   1.1rem);    /* Small heading */
  --text-body:     clamp(0.9rem,  1.2vw,   1rem);      /* Body text */
  --text-lead:     clamp(0.95rem, 1.5vw,   1.1rem);    /* Lead paragraph */
  --text-small:    clamp(0.8rem,  1.5vw,   0.9rem);    /* Card descriptions, meta */
  --text-micro:    clamp(0.68rem, 1.2vw,   0.78rem);   /* Eyebrow, badges, labels */
  --text-tiny:     clamp(0.6rem,  1vw,     0.72rem);   /* Captions, timestamps */

  /* Spacing scale (fluid) */
  --space-xs:  clamp(4px,   0.5vw,  8px);
  --space-sm:  clamp(8px,   1vw,    16px);
  --space-md:  clamp(16px,  2vw,    28px);
  --space-lg:  clamp(24px,  3vw,    48px);
  --space-xl:  clamp(40px,  5vw,    80px);
}

/* ─── Apply fluid typography to common elements ─── */
body {
  font-size: var(--text-base);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }

.lead, .hero-subtitle, .section-subtitle {
  font-size: var(--text-lead);
}

.eyebrow, .section-label, .badge, .tag {
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.card-desc, .card-description, .feature-text, .meta-text, p small {
  font-size: var(--text-small);
}

.caption, .footnote, .timestamp, .legal-text {
  font-size: var(--text-tiny);
}

/* ─── Section Anchor Offset ───
   Prevents sticky header from covering section targets
─── */
section[id], div[id], article[id] {
  scroll-margin-top: 80px;
}

/* ─── Consistent Breakpoints ───
   Only THREE breakpoints. Every site uses these.
   1024px → tablet landscape / small desktop
   768px  → tablet portrait / large phone
   480px  → small phone
─── */

/* ══════════════════════════════════════════════════════════════
   SITE HEADER — Responsive
   ══════════════════════════════════════════════════════════════ */

/* Default: two-column header (logo left, nav right) */
.site-header {
  width: 100%;
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  padding: clamp(12px, 2vw, 26px) 0;
}

/* ─── Logo Sizing System ───
   CardForge uses a width-based approach (never fixed height)
   so logos always preserve their aspect ratio.

   Standard sizes (industry best practices):
     Horizontal logo: 250-400px wide × 100px tall
     Stacked logo:    140-200px wide, proportional height
     Nav bar logo:    40-60px tall, proportional width

   For retina displays, export logo images at 2x the display size
   (e.g., display at 200px, export image at 400px).
─── */

/* Header logo (full site header, logo-left + nav-right layout) */
.logo-img,
.site-logo,
.header-logo {
  max-width: clamp(200px, 30vw, 380px);
  width: 100%;
  height: auto;
  display: block;
  flex-shrink: 0;
}

/* Nav logo (compact nav bar with hamburger menu)
   Uses height-based sizing so it fits the nav bar height.
   For stacked logos: increase nav bar height to accommodate. */
.nav-logo-img {
  display: block;
  max-height: clamp(44px, 6vh, 60px);
  width: auto;
  height: auto;
  flex-shrink: 0;
}

/* Footer logo (secondary placement, smaller) */
.footer-logo-img {
  max-width: clamp(140px, 20vw, 200px);
  width: 100%;
  height: auto;
  display: block;
}

/* Nav: horizontal pill buttons */
.main-nav {
  display: flex;
  gap: clamp(4px, 0.8vw, 8px);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.main-nav a {
  font-size: var(--text-small);
  padding: clamp(6px, 0.8vw, 10px) clamp(10px, 1.2vw, 16px);
  min-height: clamp(32px, 4vw, 40px);
  white-space: nowrap;
}

/* Tablet: 2-column header, logo shrinks slightly */
@media (max-width: 1024px) {
  .header-inner {
    grid-template-columns: 1fr auto;
    padding: 18px 0;
  }
  .logo-img, .site-logo, .header-logo {
    max-width: clamp(180px, 28vw, 300px);
  }
  .main-nav a {
    font-size: 0.85rem;
    padding: 6px 12px;
  }
}

/* Mobile: collapse header to single column, center logo */
@media (max-width: 768px) {
  .header-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 10px;
    padding: 14px 0;
  }
  .logo-img, .site-logo, .header-logo {
    max-width: clamp(180px, 45vw, 250px);
  }
  .nav-logo-img {
    max-height: clamp(38px, 5vh, 50px);
  }
  .main-nav {
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
  }
  .main-nav a {
    font-size: 0.8rem;
    padding: 6px 10px;
    min-height: 30px;
  }
}

/* ══════════════════════════════════════════════════════════════
   HERO SECTION — Responsive
   ══════════════════════════════════════════════════════════════ */

.hero-section,
.page-hero,
.hero {
  padding: var(--space-lg) 0;
}

.hero h1 {
  font-size: var(--text-display);
  line-height: 1.05;
  max-width: 12ch; /* prevent ultra-wide lines */
}

.hero .lead {
  max-width: 60ch;
}

@media (max-width: 768px) {
  .hero-section,
  .page-hero,
  .hero {
    padding: var(--space-md) 0;
  }
  .hero h1 {
    max-width: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   CARDS — Responsive Grid
   ══════════════════════════════════════════════════════════════ */

/* Default 4-column card grid */
.card-grid,
.product-grid,
.services-grid,
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: clamp(12px, 1.5vw, 20px);
}

.page-card {
  padding: clamp(16px, 2.5vw, 28px);
  border-radius: clamp(12px, 1.5vw, 18px);
}

/* Prevents cards from being too wide on desktop */
.card-grid.max-3 {
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}

/* Tablet: 2-column for grids that were 3-4 */
@media (max-width: 1024px) {
  .grid-4, .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: everything stacks */
@media (max-width: 768px) {
  .grid-4, .grid-3, .grid-2 {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════
   TWO-COLUMN LAYOUTS — Responsive
   ══════════════════════════════════════════════════════════════ */

.two-col,
.about-grid,
.contact-grid,
.content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 3vw, 40px);
}

@media (max-width: 768px) {
  .two-col,
  .about-grid,
  .contact-grid,
  .content-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ══════════════════════════════════════════════════════════════
   BUTTONS — Responsive
   ══════════════════════════════════════════════════════════════ */

.button, .btn, .cta-button {
  font-size: var(--text-small);
  padding: clamp(10px, 1.2vw, 14px) clamp(16px, 2vw, 24px);
  white-space: nowrap;
}

.button-group, .actions, .home-actions {
  display: flex;
  gap: clamp(8px, 1vw, 12px);
  flex-wrap: wrap;
}

/* Mobile: full-width buttons */
@media (max-width: 480px) {
  .button-group .button,
  .actions .button,
  .home-actions .button {
    width: 100%;
    text-align: center;
  }
}

/* ══════════════════════════════════════════════════════════════
   TOP STRIP / ANNOUNCEMENT BAR — Responsive
   ══════════════════════════════════════════════════════════════ */

.top-strip .wrap,
.topbar {
  display: flex;
  justify-content: flex-end;
  gap: clamp(8px, 1.5vw, 18px);
  padding: clamp(6px, 0.8vw, 10px) 0;
  flex-wrap: wrap;
  align-items: center;
  font-size: var(--text-small);
}

@media (max-width: 768px) {
  .top-strip .wrap,
  .topbar {
    justify-content: center;
    text-align: center;
    font-size: 0.8rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   IMAGES — Fluid by default
   ══════════════════════════════════════════════════════════════ */

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Hero images: scale down on mobile */
.hero-image img,
.hero-photo img,
.hero-banner img {
  height: clamp(240px, 35vw, 520px);
  object-fit: cover;
  width: 100%;
}

/* ══════════════════════════════════════════════════════════════
   TABLES — Responsive
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .responsive-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════
   SECTIONS — Responsive Padding
   ══════════════════════════════════════════════════════════════ */

.section {
  padding: var(--space-lg) 0;
}

@media (max-width: 768px) {
  .section {
    padding: var(--space-md) 0;
  }
}

/* ══════════════════════════════════════════════════════════════
   WRAPPER — Fluid container
   ══════════════════════════════════════════════════════════════ */

.wrap,
.container {
  width: min(1140px, calc(100% - clamp(16px, 4vw, 32px)));
  margin: 0 auto;
}

/* ══════════════════════════════════════════════════════════════
   UTILITY — Hide on mobile / desktop
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}