/* ============================================================
   HAMMOND WEB SOLUTIONS - GLOBAL CORE LIBRARY
   ============================================================ */

/* 1. RESET & BASE
   ------------------------------------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html, body {
  min-height: 100%;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* Critical for "Glued" layout */
  background-color: var(--color-bg);
  color: var(--color-text);
  overflow-y: auto;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

/* 2. THE ENGINE (:root)
   ------------------------------------------------------------ */
:root {
  /* FONT VARIABLES */
  --font-primary: 'Placeholder Primary', serif;  
  --font-secondary: 'Placeholder Secondary', sans-serif; 

  /* BRAND COLORS */
  --color-primary: black;
  --color-secondary: #41766E;
  --color-tertiary: #e7e7e7;
  --color-bg: white;
  --color-text: black;
  --color-text-light: white;

  /* SPACING SYSTEM (8pt Grid) */
  --space-3xs: 0.25rem; /* 4px */
  --space-2xs: 0.5rem;  /* 8px */
  --space-xs: 0.75rem;  /* 12px */
  --space-s: 1rem;      /* 16px */
  --space-m: 1.5rem;    /* 24px */
  --space-l: 2rem;      /* 32px */
  --space-xl: 3rem;     /* 48px */
  --space-2xl: 4rem;    /* 64px */
  --space-3xl: 8rem;    /* 128px */

  /* FLUID TYPE SCALE (Major Third) */
  --text-p: clamp(1rem, 0.95rem + 0.24vw, 1.125rem);
  --text-h6: clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem);
  --text-h5: clamp(1.56rem, 1.41rem + 0.76vw, 1.95rem);
  --text-h4: clamp(1.95rem, 1.71rem + 1.2vw, 2.44rem);
  --text-h3: clamp(2.44rem, 2.08rem + 1.8vw, 3.15rem);
  --text-h2: clamp(2.8rem, 2.4rem + 2.2vw, 3.6rem);
  --text-h1: clamp(3.2rem, 2.7rem + 3vw, 4.5rem);
  --text-xs: clamp(0.8rem, 0.78rem + 0.1vw, 0.88rem);

  --lh-display: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.6;

  /* SIZING CONSTANTS */
  --h-height-mobile: 64px;
  --h-height-desktop: 80px;
  --inner-max-desktop: 1400px;

  /* MOBILE DEFAULTS (Mobile First) */
  --h-height: var(--h-height-mobile);
  --inner-width: 90%;
  --inner-max: 90%;

  /* THE VIEWPORT CALCULATION (Point 3) */
  --av: calc(100svh - var(--h-height));


  /* BUTTON STRUCTURAL DEFAULTS */
  --btn-font-weight: 600;
  --btn-transition: 0.2s ease-in-out;
  
  /* PADDING RATIO (Using your 8pt spacing system) */
  --btn-py: var(--space-s);  /* 16px vertical */
  --btn-px: var(--space-xl); /* 48px horizontal */
  --btn-radius: 4px;         /* Default base radius */

  /* Icons */
  --icon-arrow: clamp(1.2rem, 1rem + 0.55vw, 1.4rem);

}

/* 3. RESPONSIVE UPGRADES
   ------------------------------------------------------------ */
@media (min-width: 769px) {
  :root {
    --h-height: var(--h-height-desktop);
    --inner-width: 90%;
    --inner-max: var(--inner-max-desktop);
  }
}

/* 4. TYPOGRAPHY APPLICATION
   ------------------------------------------------------------ */
h1, h2, h3 {
  font-family: var(--font-secondary); /* HEADINGS = IMPACT FONT */
  line-height: var(--lh-display);
  font-weight: 800;
  margin-bottom: var(--space-m);
}

h4, h5, h6 {
  font-family: var(--font-secondary);
  line-height: var(--lh-heading);
  font-weight: 600;
  margin-bottom: var(--space-s);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }
h5 { font-size: var(--text-h5); }
h6 { font-size: var(--text-h6); }

p {
  font-family: var(--font-primary); /* BODY = READABLE FONT */
  font-size: var(--text-p);
  line-height: var(--lh-body);
  margin-bottom: var(--space-m);
}

/* 5. STRUCTURE & LAYOUT
   ------------------------------------------------------------ */
.inner {
  width: var(--inner-width);
  max-width: var(--inner-max);
  margin-inline: auto;
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Vertical Rhythm Reset */
.inner > *:last-child {
  margin-bottom: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-secondary);
  font-weight: var(--btn-font-weight);
  font-size: var(--text-p);
  text-align: center;
  padding: var(--space-xs) var(--space-m);
  transition: var(--btn-transition);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}

.btn.primary{
  background-color: var(--color-primary);
  color: var(--color-text);
}

.btn.secondary{
  background-color: var(--color-secondary);
  color: var(--color-text-light);
}

.btn-text{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-secondary);
  font-weight: var(--btn-font-weight);
  font-size: var(--text-p);
  text-align: center;
  transition: var(--btn-transition);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  text-decoration: underline 2px;
}

.btn-cta{
  display: inline-block;
  padding: var(--space-xs) var(--space-s);
  color: var(--color-bg);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.7rem;
  border-radius: 0;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 1px;
  background-color: var(--color-secondary);
}

.arrow {
  width: var(--icon-arrow);
  height: var(--icon-arrow);
  flex-shrink: 0;
  transition: transform var(--btn-transition);
  transform: scale(1.8);
  rotate: -45deg;
}

hr{
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
}





/* ============================================================
   SECTION MULTIPLIERS (The "Glue")
   ============================================================ */

/* 1. MOBILE HEIGHTS (Default) */
.m-s-quarter { min-height: calc(var(--av) * 0.25); }
.m-s-half    { min-height: calc(var(--av) * 0.5); }
.m-s-3-4     { min-height: calc(var(--av) * 0.75); }
.m-s-full    { min-height: var(--av); }
.m-s-double  { min-height: calc(var(--av) * 2); }
.m-s-triple  { min-height: calc(var(--av) * 3); }

/* 2. DESKTOP HEIGHTS (769px and up) */
@media (min-width: 769px) {
  .d-s-quarter { min-height: calc(var(--av) * 0.25) !important; }
  .d-s-half    { min-height: calc(var(--av) * 0.5) !important; }
  .d-s-3-4     { min-height: calc(var(--av) * 0.75) !important; }
  .d-s-full    { min-height: var(--av) !important; }
  .d-s-double  { min-height: calc(var(--av) * 2) !important; }
  .d-s-triple  { min-height: calc(var(--av) * 3) !important; }
}

section{
  padding-bottom: var(--space-m);
  padding-top: var(--space-m);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.secondary{
  background-color: var(--color-secondary);
  color: var(--color-text-light);
}

.tertiary{
  background-color: var(--color-tertiary);
}

.invert{
  filter: invert(1);
}