/* ===== Global Responsive & Mobile Compatibility Layer ===== */
:root {
  --container-max: 1200px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --radius: 16px;
}

html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

*, *::before, *::after { box-sizing: inherit; }

/* Prevent horizontal scroll on narrow screens */
html, body {
  width: 100%;
  overflow-x: hidden;
}

/* Flexible media */
img, svg, video, canvas, audio, iframe, embed, object {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Container utility for centered content */
.container, .wrapper, .inner, .page-width {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* Tap target sizing */
button, .button, .btn, a.button, input[type="submit"] {
  min-height: 44px;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
}

/* Avoid iOS zoom on inputs */
input, select, textarea {
  font-size: 16px !important;
  line-height: 1.4;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
}

/* Make tables scrollable on mobile */
.table-responsive {
  width: 100%;
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
}

/* Responsive grid helpers (non-destructive) */
.grid, .row, .columns {
  display: grid;
  gap: var(--space-6);
}
/* If a site already defines .grid, this acts as a progressive enhancement */
@media (min-width: 768px) {
  .grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Media queries to gently stack content */
@media (max-width: 1024px) {
  .stack-lg {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}
@media (max-width: 768px) {
  .hide-sm { display: none !important; }
  .hero { padding: 3rem 1rem; }
  .section, section { padding: 2.5rem 0; }
  nav ul { flex-wrap: wrap; gap: var(--space-2); }
}

/* Responsive embeds (YouTube/Vimeo/etc.) */
.embed-responsive {
  position: relative; width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0; overflow: hidden; border-radius: var(--radius);
}
.embed-responsive iframe {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  border: 0;
}

/* Utility spacing */
.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
.p-4  { padding: var(--space-4); }
.rounded { border-radius: var(--radius); }

/* Color scheme friendliness */
@media (prefers-color-scheme: dark) {
  body { background: #0b0b0c; color: #f2f2f3; }
  header, footer, .card { background: #141416; color: #f2f2f3; }
  a { color: #8ab4ff; }
}

/* Ensure fixed headers don’t overlap anchor targets */
:target { scroll-margin-top: 80px; }


/* ==== Mobile header & footer visibility fixes ==== */
@media (max-width: 768px) {
  /* Make header auto-height and visible */
  header, .site-header {
    position: sticky !important;
    top: env(safe-area-inset-top, 0) !important;
    z-index: 1000 !important;
    height: auto !important;
    overflow: visible !important;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  header *, .site-header * {
    max-width: 100%;
  }

  /* Prevent oversized logos from cropping layout */
  .logo img, img.logo, header img[alt*="logo" i] {
    max-height: 44px !important;
    height: auto !important;
    width: auto !important;
  }

  /* Let nav wrap and remain tappable */
  nav ul, .nav, .menu, .navbar, .navigation {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    margin: 0 !important;
    padding: 0.25rem 0 !important;
    list-style: none;
  }
  nav li { margin: 0; }
  nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.25rem 0.5rem; }

  /* Avoid any global overflow clipping */
  body, main, header, footer {
    overflow-x: visible !important;
  }

  /* Ensure content isn't hidden under sticky header */
  :root { --mobile-header-offset: 64px; }
  main, .main, #main, .content, #content {
    padding-top: max(var(--mobile-header-offset), env(safe-area-inset-top, 0)) !important;
  }

  /* Make footer fully visible and not fixed on mobile */
  footer, .site-footer {
    position: static !important;
    bottom: auto !important;
    height: auto !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0) + 16px) !important;
    overflow: visible !important;
  }
  footer .grid, footer .columns, .site-footer .grid, .site-footer .columns {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* Kill any hard-coded fixed heights that might clip sections */
  [style*="height:" i] { height: auto !important; }
  [class*="header" i][style*="height:" i] { height: auto !important; }
  [class*="footer" i][style*="height:" i] { height: auto !important; }

  /* Ensure dropdowns/menus aren't hidden */
  .dropdown, .menu-panel { position: relative; z-index: 1001; overflow: visible; }
}


/* === Remove sticky header on mobile === */
@media (max-width: 768px) {
  header, .site-header {
    position: relative !important;
    top: auto !important;
  }
}


/* === Mobile Footer Cleanup (proportionate layout, no content removed) === */
@media (max-width: 768px) {
  footer, .site-footer {
    padding: 24px 16px !important;
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* Ensure a single-column, evenly spaced layout */
  footer .grid, .site-footer .grid, 
  footer .columns, .site-footer .columns, 
  footer .footer-columns, .site-footer .footer-columns, 
  footer .row, .site-footer .row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Headings scale down and align cleanly */
  footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
  .site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5, .site-footer h6 {
    margin: 6px 0 4px;
    font-size: 1rem !important;
    line-height: 1.25;
  }

  /* Normalize text sizes for links and paragraphs */
  footer p, .site-footer p, footer a, .site-footer a, footer li, .site-footer li {
    font-size: 0.95rem;
  }

  /* Make lists tidy and tappable */
  footer ul, .site-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  footer li + li, .site-footer li + li {
    margin-top: 6px;
  }
  footer a, .site-footer a {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    text-decoration: none;
  }

  /* Brand/logo sizing */
  footer .logo img, .site-footer .logo img, 
  footer img.logo, .site-footer img.logo,
  footer .footer-brand img, .site-footer .footer-brand img {
    max-height: 36px !important;
    width: auto !important;
    height: auto !important;
  }

  /* Social icons row: evenly spaced and finger-friendly */
  footer .social, .site-footer .social, 
  footer .social-icons, .site-footer .social-icons {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 4px;
  }
  footer .social a, .site-footer .social a,
  footer .social-icons a, .site-footer .social-icons a {
    width: 44px; height: 44px;
    display: inline-flex; justify-content: center; align-items: center;
    border-radius: 999px;
  }
  footer .social img, .site-footer .social img,
  footer .social-icons img, .site-footer .social-icons img {
    max-height: 24px; width: auto; height: auto;
  }

  /* Contact rows align nicely */
  footer .contact, .site-footer .contact {
    display: grid; gap: 8px;
  }
  footer .contact .item, .site-footer .contact .item {
    display: flex; align-items: center; gap: 8px;
  }

  /* Subfooter / copyright line */
  footer .subfooter, .site-footer .subfooter, 
  footer .footer-bottom, .site-footer .footer-bottom {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,0.08);
    font-size: 0.9rem;
    opacity: 0.9;
  }

  /* Prevent any fixed-height footers from clipping content */
  footer[style*="height:" i], .site-footer[style*="height:" i] { height: auto !important; }
}


/* === Mobile header logo ~25% larger === */
@media (max-width: 768px) {
  .logo img, img.logo, header img[alt*="logo" i] {
    max-height: 55px !important;
    height: auto !important;
    width: auto !important;
  }
}


/* === Mobile header: boldly larger logo (~50%) + balanced spacing === */
@media (max-width: 768px) {
  /* Header spacing adjusted to accommodate larger logo */
  header, .site-header {
    position: relative !important; /* keep non-sticky per your preference */
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    min-height: 72px !important; /* ensures comfortable height for logo + nav */
  }

  /* Logo enlarged ~50% from 44px -> ~66px */
  .logo img, img.logo, header img[alt*="logo" i] {
    max-height: 66px !important;
    height: auto !important;
    width: auto !important;
  }

  /* Keep nav tidy next to a larger logo */
  nav, .nav, .navbar, .navigation, header .menu {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  nav a, .nav a, .navbar a, .navigation a {
    min-height: 40px;
    padding: 6px 8px;
  }

  /* Prevent overlap/clipping and horizontal scroll */
  header *, .site-header * { max-width: 100%; }
  body, main { overflow-x: hidden; }
}