/* ===== Global CSS (Glass & Calibrations) ===== */

/* Optional: load Manrope from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root{
  /* Brand Colors */
  --gc-dark-blue: #003b5f;
  --gc-light-blue: #0091eb;
  --gc-white: #ffffff;
  --gc-red:#d72638;
  /* Helpful neutrals */
  --gc-text: #696969;
  --gc-muted: rgba(11, 18, 32, 0.72);
  --gc-border: rgba(0, 0, 0, 0.10);

  /* Typography */
  --gc-font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Spacing scale (responsive) */
  --space-2xs: clamp(6px, 0.6vw, 10px);
  --space-xs:  clamp(10px, 1vw, 14px);
  --space-sm:  clamp(14px, 1.4vw, 18px);
  --space-md:  clamp(16px, 2vw, 24px);
  --space-lg:  clamp(22px, 3vw, 40px);
  --space-xl:  clamp(32px, 4vw, 64px);

  /* Layout */
  --container-max: 1500px;

  /* Radius + shadow */
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-md: 0 8px 20px rgba(0,0,0,.08);
}

/* ===== Base ===== */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family:var(--gc-font);
  color:var(--gc-text);
  background: var(--gc-white);
  line-height: 1.5;

  /* Sticky footer layout */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* ===== Remove Mobile Tap Blue Highlight ===== */
*{
  -webkit-tap-highlight-color: transparent;
}
/* ===== TYPOGRAPHY SYSTEM ===== */
h1{
  font-size: clamp(1.9rem, 1.6061rem + 1.3282vw, 3.2rem);
  line-height:1.1;
  margin-bottom:var(--space-sm);
}

h2{
  font-size: clamp(1.7rem, 1.4582rem + 0.9862vw, 2.6rem);
  line-height:1.15;
  margin-bottom:var(--space-xs);
}

h3{
  font-size: clamp(1.4rem, 1.3151rem + 0.3514vw, 1.7rem);
  line-height:1.2;
  margin-bottom:var(--space-xs);
}

h4{
  font-size: clamp(1.3rem, 1.2152rem + 0.3507vw, 1.6rem);
  line-height:1.25;
}

h5{
  font-size: clamp(1.1rem, 1.0438rem + 0.2347vw, 1.3rem);
}

h6{
  font-size: clamp(1rem, 0.9602rem + 0.1653vw, 1.1rem);
}

p{
  font-size: clamp(0.88rem, 0.8354rem + 0.1857vw, 1.05rem);
  color:var(--gc-muted);
  margin-bottom:var(--space-xs);
}




/* If you wrap content in <main>, it will push footer down */
main{ flex: 1; }

img{ max-width:100%; height:auto; display:block; }
a{ color: var(--gc-light-blue); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ===== Container ===== */
.container{
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

/* ===== Sections ===== */
.section{
  padding: var(--space-xl) 0;
}

/* ===== Helpers ===== */
.bg-dark{ background: var(--gc-dark-blue); color: var(--gc-white); }
.bg-light{ background: var(--gc-light-blue); color: var(--gc-white); }
.text-dark{ color: var(--gc-dark-blue); }
.text-light{ color: var(--gc-light-blue); }
.text-muted{ color: var(--gc-muted); }

/* ===== UI blocks ===== */
.card{
  background: var(--gc-white);
  border: 1px solid var(--gc-border);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

/* buttons*/
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, opacity .15s ease;
	text-decoration:none !important;
}
.btn:hover{ transform: translateY(-1px); opacity: .95; }
.btn-primary{ background: var(--gc-light-blue); color: var(--gc-white); }
.btn-secondary{ background: var(--gc-dark-blue); color: var(--gc-white); }
.btn-outline{ background: transparent; border-color: var(--gc-light-blue); color: var(--gc-light-blue); }
.btn-outline-secondary{ background: transparent; border-color: var(--gc-dark-blue); color: var(--gc-dark-blue); }
.btn-white{ background: var(--gc-white); color: var(--gc-dark-blue); border-radius: 999px;}
/* ===== Footer (optional styles) ===== */
.site-footer{
  background: var(--gc-dark-blue);
  color: var(--gc-white);
  padding: var(--space-sm) 0;
}
.site-footer .container{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}