/* ---------------------------------------------------
   IPVTech – clean white/black/orange theme
   --------------------------------------------------- */

/* ---- CSS Variables ---- */
:root {
  /* Colors */
  --c-white: #ffffff;
  --c-black: #111111;
  --c-orange: #ff6600;
  --c-orange-dark: #cc5200;
  --c-gray-light: #f5f5f5;
  --c-gray-mid: #e0e0e0;
  --c-gray-dark: #333333;

  /* Spacing */
  --sp-xs: 0.5rem;
  --sp-sm: 1rem;
  --sp-md: 2rem;
  --sp-lg: 3rem;

  /* Typography – fluid scaling */
  --fs-base: clamp(1rem, 0.9vw + 0.5rem, 1.125rem);
  --fs-lg:   clamp(1.25rem, 1vw + 0.5rem, 1.5rem);
  --fs-xl:   clamp(1.5rem, 1.2vw + 0.5rem, 2rem);
  --fs-2xl:  clamp(2rem, 1.5vw + 0.5rem, 2.5rem);
  --fs-sm:   0.875rem;
}

/* ---- Dark Mode (optional) ---- */
[data-theme='dark'] {
  --c-white: #111111;
  --c-black: #ffffff;
  --c-orange: #ff8533;
  --c-gray-light: #333333;
  --c-gray-mid: #555555;
  --c-gray-dark: #111111;
}

/* ---- Reset ---- */
*, *::before, *::after {box-sizing:border-box; margin:0; padding:0;}
html {font-size:100%; scroll-behavior:smooth;}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--c-black);
  background: var(--c-white);
}

/* ---- Layout ---- */
.container {max-width:1200px; margin:auto; padding:0 var(--sp-sm);}
header, nav, main, footer {width:100%;}

/* ---- Header (Hero) ---- */
header {
  background: var(--c-orange);
  color: var(--c-white);
  text-align:center;
  padding: var(--sp-lg) var(--sp-sm);
}
header h1 {font-size: var(--fs-2xl); margin-bottom: var(--sp-xs);}
header p   {font-size: var(--fs-lg); margin-bottom: var(--sp-sm); max-width: 40rem; margin-left:auto; margin-right:auto;}
.cta-btn {
  display:inline-block;
  background: var(--c-black);
  color: var(--c-white);
  padding: var(--sp-xs) var(--sp-sm);
  border-radius:4px;
  font-weight:600;
  text-decoration:none;
  transition:background .2s;
}
.cta-btn:hover {background: var(--c-gray-dark);}

/* ---- Navigation ---- */
nav {
  background: var(--c-black);
  position:sticky; top:0; z-index:10;
  line-height: 1;
  padding: 0.15rem 0;
}
nav ul {
    list-style:none; display:flex; gap:0.1rem; flex-wrap:nowrap; justify-content:center;
    margin: 0; padding: 0;
    flex-direction: row;
  }
nav a {
  color: var(--c-white);
  text-decoration:none;
  padding: 0.1rem 0.25rem; /* reduced padding for smaller nav height */
  font-weight:600;
  display:inline-flex; align-items:center; gap:0.1rem; /* tighter spacing */
  font-size: 0.7rem;
}
nav a:hover {background: var(--c-orange);}

/* ---- Icon size (inline SVG) ---- */
nav .nav-icon {
  width: 10px !important;
  height: 10px !important;
  max-width: 10px !important;
  max-height: 10px !important;
  object-fit: contain;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

/* ---- Main Content ---- */
main {padding: var(--sp-lg) 0;}
h1, h2, h3 {color: var(--c-orange); margin-top: var(--sp-lg); margin-bottom: var(--sp-xs);}
h1 {font-size: var(--fs-2xl);}
h2 {font-size: var(--fs-xl);}
h3 {font-size: var(--fs-lg); color: var(--c-orange-dark);}

/* ---- Lists (cards) ---- */
ul {margin-left: var(--sp-sm);}
ul li {margin-bottom: var(--sp-xs);} 

/* ---- Card style for resource blocks (used in markdown) ---- */
.card {
  border: 1px solid var(--c-gray-mid);
  border-radius:6px;
  padding: var(--sp-sm);
  background: var(--c-gray-light);
  margin-bottom: var(--sp-sm);
}
.card h3 {color: var(--c-orange); margin-bottom: var(--sp-xs);}
.card a {color: var(--c-orange); font-weight:600; text-decoration:none;}
.card a:hover {text-decoration:underline;}

/* ---- Footer ---- */
footer {
  background: var(--c-black);
  color: var(--c-white);
  text-align:center;
  padding: var(--sp-md);
  font-size: 0.9rem;
}

/* ---- Responsive ---- */
@media (max-width:768px) {
  nav ul {flex-direction:column;}
  header {padding: var(--sp-lg) var(--sp-xs);}
}
@media (min-width:769px) {
  nav ul {flex-direction:row !important; justify-content:center; white-space:nowrap;}
  nav a {font-size: 0.8rem; padding: 0.1rem 0.3rem; gap: 0.1rem;}
}

/* ---- Accessibility: reduce motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {transition:none !important;}
}