/* Loads on every page that links global.css (all of them) — fixes fonts
 * being missing site-wide except the homepage (which had its own separate
 * <link> for this in index.html that no other page shared). Must be the
 * very first rule in the file — @import only works before any other CSS. */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* Without this, any element with an explicit width (e.g. width: 100%) plus
 * padding/border adds those on TOP of that width instead of inside it —
 * pushing it past its container's edge. That's exactly what was cutting
 * off the right side of the product specs grid (.product-details-page had
 * width:100% + padding, no border-box). Global reset so this class of bug
 * doesn't keep resurfacing element by element. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

@media (min-width: 1024px) {
  html {
    font-size: 18px;
  }
}

:root {
  --primary-color: #008894;
  --body-color: #f6f6f6;
  --card-color: #ffffff;
  --text-title: #0c0407;
  --text-subTitle: #666666;
  --bg-light: #f8f9fa;
  --font-inter: "Inter", sans-serif;
  --font-montserrat: "Montserrat", sans-serif;
  --fs-hero-title: 68px;
  --fs-section-heading: 54px;
  --fs-paragraph: 18px;
  --padding-standard: 2rem;
  --border-radius-md: 8px;
  --margin-standard: 0 5rem;
  /* small devices */
  --text-paragraph-sm: 16px;
  --fs-section-heading-sm: 35px;
}

.align-wrapper {
  margin: var(--margin-standard);
}

@media (max-width: 1024px) {
  .align-wrapper {
    margin: 0;
    padding: 0 1rem;
  }
}

/* More side padding on very large screens (e.g. 1920x1080) so content
 * doesn't stretch edge-to-edge. Deliberately NOT max-width + margin:auto —
 * that centers whichever box carries align-wrapper, which is wrong for
 * something like hero text that should stay left-anchored (flush with the
 * header logo above it), not float to the middle of a wide background image. */
@media (min-width: 1600px) {
  .align-wrapper {
    margin: 0 5rem;
  }
}

.hero-title {
  font-size: var(--fs-hero-title);
  font-weight: bold;
  font-family: var(--font-inter);
}

.section-heading {
  font-size: var(--fs-section-heading);
  font-weight: bold;
  font-family: var(--font-inter);
}

.paragraph {
  font-size: var(--fs-paragraph);
  font-weight: normal;
  font-family: var(--font-montserrat);
}

.h2 {
  font-size: var(--fs-section-heading);
}

@media (max-width: 768px) {
  .section-heading {
    font-size: var(--fs-section-heading-sm);
  }
  h2 {
    font-size: var(--fs-section-heading-sm);
  }
}

#main-content {
  padding-bottom: 5rem;
}