/* TechyGuide Brand Theme — Base & Variables (v1.0) */
:root {
  /* Brand Palette */
  --tg-beer: #E28716;
  --tg-pine: #008273;
  --tg-navy: #0C2340;
  --tg-offwhite: #F8F9FA;
  --tg-grey: #EAEAEA;
  --tg-charcoal: #333333;
  --tg-teal: #00A693;
  --tg-coral: #FF7043;
  --tg-orange: #FF5722;
  --tg-magenta: #E91E63;  
  --tg-purple: #9C27B0;
  --tg-light-purple: #E1BEE7;
  --tg-light-orange: #eaf183;
  --tg-light-magenta: #F8BBD0;
  --tg-light-purple: #E1BEE7;
  --tg-light-teal: #B2DFDB;
  --tg-light-coral: #FFCCBC;  
  

  /* Gradients */
  --tg-gradient-cta: linear-gradient(135deg, #008273 0%, #E28716 100%);

  /* Layout */
  --container-max: 1500px;
  --radius-6: 6px;
  --radius-8: 8px;
  --shadow-1: 0 6px 18px rgba(12, 35, 64, 0.18);

  /* Logo guidelines */
  --logo-min-width-web: 150px;
  --logo-clear-space: 40px; /* approx height of the 'T' */
  
  /* Header */
  --header-height: 64px;

  /* Breakpoints */
  --bp-xs: 360px;
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

/* Header accent line */
.header-accent   {height: 6px; max-width: 160px; border-radius: 3px; background: linear-gradient(90deg, var(--primary, #0d6efd), var(--secondary, #00c2ff)); margin: 12px auto 0px;}    

/* Reset & base */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Smooth anchor scrolling for better UX */
html { scroll-behavior: smooth; }
body {
  background: var(--tg-offwhite);
  color: #00f70a;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.container { max-width: var(--container-max); width: 100%; margin: 0 auto; padding: 0 16px; }

@media (max-width: 576px) {
  .container { padding: 0 12px; }
}

@media (min-width: 1900px) {
  .container { width: 80vw; max-width: none; }
}

/* Accessibility helpers */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Typography basics */
h1, h2, h3, h4 { color: var(--tg-navy); margin: 0 0 10px; }
p { margin: 12px; overflow-wrap: anywhere; word-break: break-word; color: #000000; }

/* Utility colors */
.bg-navy { background: var(--tg-navy); }
.bg-offwhite { background: var(--tg-offwhite); }
.text-navy { color: var(--tg-navy); }
.text-charcoal { color: var(--tg-charcoal); }
.divider { height: 1px; background: var(--tg-grey); }

/* Buttons (generic) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-8); font-weight: 600; border: none; cursor: pointer; }
.btn-primary { background: var(--tg-gradient-cta); color: #fff; }
.btn-secondary { background: var(--tg-grey); color: var(--tg-charcoal); }
.btn-gradient { background: var(--tg-gradient-cta); color: #fff; box-shadow: var(--shadow-1); }

/* Page offset for fixed header */
body.index-page { padding-top: var(--header-height, 64px); }

/* Ensure anchored targets are scrolled below the fixed header */
:target { scroll-margin-top: calc(var(--header-height, 64px) + 12px); }

/* Responsive helpers */
/* Generic image containment to prevent overflow in cards and utility blocks */
.section-card img,
.card img,
.powered-link img {
  max-width: 100%;
  height: auto;
}

/* Ensure any responsive container enforces border-box sizing for predictable fits */
.responsive-container *, .about *, .benefits *, .hero * {
  box-sizing: border-box;
}

/* Generic section card style for reusable content blocks */
.section-card {
  width: 100%;
  max-width: 100%;
  display: block;
  box-sizing: border-box;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  background: rgba(255,255,255,0.95);
  padding: 16px;
  box-shadow: 0 6px 18px rgba(12, 35, 64, 0.08);
}

/* Consistent widths for key sections on larger screens */
@media (min-width: 900px) {
  /* Apply 80% viewport width uniformly to listed sections */
  #about > .container,
  #benefits > .container,
  #stats > .container,
  #timeline > .container,
  #eligibility > .container,
  #themes > .container,
  #judging > .container,
  #prizes > .container,
  #resources > .container,
  #faq > .container,
  #get-in-touch > .container,
  #contact > .container {
    width: 80vw;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Reaffirm the same rule for ultra-wide screens */
@media (min-width: 1500px) {
  #about > .container,
  #benefits > .container,
  #stats > .container,
  #timeline > .container,
  #eligibility > .container,
  #themes > .container,
  #judging > .container,
  #prizes > .container,
  #resources > .container,
  #faq > .container,
  #get-in-touch > .container,
  #contact > .container {
    width: 80vw;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Specific early match for Get in Touch at 899px to align with others */
@media (min-width: 899px) {
  #get-in-touch > .container {
    width: 80vw;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }
}

/* moved to css/index_css/eligibility.css */