/* Zeam refresh — page / breakpoint tokens
   Figma: Breakpoint Measurements + Column Layouts (node 44:48832)
   Designer spec is Nuxt + Tailwind; this app is ASP.NET. These variables
   match the Figma/Tailwind spacing scale so layout can move to Nuxt later.

   Tailwind equivalents:
     max-w-[1680px] mx-auto
     px-4 pb-12              Phone   <768
     md:px-6                 Tablet  768–1023
     lg:px-8 pb-12           Laptop  1024–1439 and Desktop ≥1440
     grid-cols-5 gap-4
     md:grid-cols-9
     lg:grid-cols-13 lg:gap-6
*/

:root {
  /* Tailwind spacing scale from the Figma file */
  --spacing-1_5: 6px;
  --spacing-2: 8px;
  --spacing-2_5: 10px;
  --spacing-4: 16px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-12: 48px;
  --spacing-16: 64px;

  /* Named breakpoints (not usable inside @media; documented for JS / Nuxt) */
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1440px;

  --page-max-width: 1680px;
  --page-padding-bottom: var(--spacing-12);

  /* Phone (default, <768): px-4, 5 cols, gap-4 */
  --page-margin: var(--spacing-4);
  --page-columns: 5;
  --page-gutter: var(--spacing-4);
}

@media (min-width: 768px) {
  :root {
    /* Tablet: md:px-6, 9 cols, gap-4 */
    --page-margin: var(--spacing-6);
    --page-columns: 9;
    --page-gutter: var(--spacing-4);
  }
}

@media (min-width: 1024px) {
  :root {
    /* Laptop: lg:px-8, 13 cols, gap-6 */
    --page-margin: var(--spacing-8);
    --page-columns: 13;
    --page-gutter: var(--spacing-6);
  }
}

@media (min-width: 1440px) {
  :root {
    /* Desktop — same grid as laptop; body caps at 1680 */
    --page-margin: var(--spacing-8);
    --page-columns: 13;
    --page-gutter: var(--spacing-6);
  }
}

/* Body canvas: cap main content at 1680. Header stays full-bleed; footer uses the same token. */
.superUniqueName {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
}

/* Opt-in padded body (Tailwind: max-w-[1680px] mx-auto px-* pb-12) */
.page {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--page-margin);
  padding-bottom: var(--page-padding-bottom);
  box-sizing: border-box;
}

/* Opt-in column grid (Tailwind: grid grid-cols-* gap-*) */
.page-grid {
  display: grid;
  grid-template-columns: repeat(var(--page-columns), minmax(0, 1fr));
  gap: var(--page-gutter);
  width: 100%;
}

.page-grid > * {
  min-width: 0;
}

.page-span-full {
  grid-column: 1 / -1;
}

.page-span-1 { grid-column: span 1; }
.page-span-2 { grid-column: span 2; }
.page-span-3 { grid-column: span 3; }
.page-span-4 { grid-column: span 4; }
.page-span-5 { grid-column: span 5; }
.page-span-6 { grid-column: span 6; }
.page-span-7 { grid-column: span 7; }
.page-span-8 { grid-column: span 8; }
.page-span-9 { grid-column: span 9; }
.page-span-10 { grid-column: span 10; }
.page-span-11 { grid-column: span 11; }
.page-span-12 { grid-column: span 12; }
.page-span-13 { grid-column: span 13; }

/* QA-BREAKPOINT-DEBUG — search this tag to find/remove.
   Phone red, tablet gold, laptop teal, desktop blue. Corner label shows the range. */
:root {
  --page-debug-bg: #7a1f2b;
  --page-debug-label: "Phone <768";
}

@media (min-width: 768px) {
  :root {
    --page-debug-bg: #7a5a12;
    --page-debug-label: "Tablet 768–1023";
  }
}

@media (min-width: 1024px) {
  :root {
    --page-debug-bg: #0f5c4c;
    --page-debug-label: "Laptop 1024–1439";
  }
}

@media (min-width: 1440px) {
  :root {
    --page-debug-bg: #1e2a7a;
    --page-debug-label: "Desktop ≥1440";
  }
}

html,
body,
.superUniqueName,
.footer,
.weather-page,
#pageData,
#homePage {
  background-color: var(--page-debug-bg) !important;
  background-image: none !important;
}

body::after {
  content: var(--page-debug-label);
  position: fixed;
  z-index: 99999;
  right: 12px;
  bottom: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-family: Poppins, "Source Sans Pro", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.02em;
  pointer-events: none;
}
/* /QA-BREAKPOINT-DEBUG */