/* ===== Responsive foundations ===== */
:root{
  /* fluid type scales that respect your brand */
  --fs-xs: clamp(12px, 0.75vw + 9px, 14px);
  --fs-sm: clamp(14px, 0.9vw + 10px, 16px);
  --fs-md: clamp(16px, 1.1vw + 10px, 18px);
  --fs-lg: clamp(20px, 1.4vw + 12px, 26px);
  --container: 1200px; /* main max width */
}

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

img, video, iframe { max-width: 100%; height: auto; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 16px; }

h1 { font-size: var(--fs-lg); line-height: 1.2; }
h2, .section h2 { font-size: clamp(22px, 1.2vw + 16px, 30px); line-height: 1.25; }
body { font-size: var(--fs-md); }

/* ===== Grids that collapse nicely ===== */
.grid-3 {
  display: grid; gap: 22px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 992px){ .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .grid-3 { grid-template-columns: 1fr; } }

/* Common two-column */
.split-2 { display: grid; gap: 24px; grid-template-columns: 1.2fr 1fr; }
@media (max-width: 992px){ .split-2 { grid-template-columns: 1fr; } }

/* Nav/topbar already sticky; ensure content never hides behind it */
.section, [id] { scroll-margin-top: 110px; }

/* Buttons & forms scale */
button, .btn, input, select, textarea {
  font-size: var(--fs-sm);
}
input[type="text"], input[type="email"], textarea {
  width: 100%;
}

/* Footer responsiveness */
.footer { width: 100%; }
.footer .cols {
  display: grid; gap: 22px; grid-template-columns: 2fr 1fr 1fr;
}
@media (max-width: 992px){ .footer .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .footer .cols { grid-template-columns: 1fr; } }

/* Social buttons wrap instead of overlapping */
.newsletter {
  display: grid; grid-template-columns: 1fr auto; gap: 10px;
}
@media (max-width: 480px){
  .newsletter { grid-template-columns: 1fr; }
  .newsletter .btn-nl { width: 100%; }
}

/* Tables (if any) */
.table-wrap { overflow-x: auto; }

/* static/css/style.css */

.hidden-for-responsiveness-only {
    /* Ensures the element is not visible and takes up no space */
    display: none !important;
}