// stylelint-disable rem-over-px/rem-over-px

// For max-width properties, use WordPress CSS variables from theme.json:
// - var(--wp--style--global--content-size)  = 800px (default) (article width)
// - var(--wp--style--global--wide-size)     = 1440px (default) (wide blocks)
// - var(--wp--custom--grid-base)            = 1440px (default) (site container)

// SCSS variables below are ONLY for media queries (CSS vars don't work there)
// Media query breakpoints
$breakpoint-mobile: 600px;
$breakpoint-tablet: 768px;
$breakpoint-tablet-landscape: 1024px;
$breakpoint-desktop: 1200px;
$breakpoint-grid-base: 1440px;

// Navigation breakpoint (when mobile nav kicks in)
$breakpoint-nav: 1030px;

// CSS variable for JS navigation
:root {
  --breakpoint-nav: #{$breakpoint-nav - 1px};
}