/* =========================================================
   T2 Engineering — Global Styles (consolidated)
   Last updated: 2025-08
   ========================================================= */

/* ---------- CSS Variables ---------- */
:root{
  --brand:#8b0000;     /* primary red */
  --hero:#2E3033;      /* dark header/hero */
  --ink:#1f2327;       /* body text */
  --muted:#6A6F76;     /* secondary text */
  --card:#ffffff;      /* panels/cards */
  --ring:rgba(255,255,255,.12);
  --shadow-sm:0 1px 6px rgba(0,0,0,.08);
  --shadow-md:0 2px 10px rgba(0,0,0,.10);
  --shadow-lg:0 10px 24px rgba(0,0,0,.12);
  --radius:10px;
  --radius-lg:12px;

  --container:1200px;
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.5rem;
  --space-6:2rem;
}

/* ---------- Base / Reset ---------- */
*{box-sizing:border-box}
html{
  font-family: Arial, sans-serif;
  color: var(--ink);
  background:#fff;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  transition: background-color .2s ease;
}
@media (prefers-color-scheme: light){
  html{ background:#fff; color:var(--ink); }
}
body{ margin:0; min-height:100%; }

/* Typography */
h1,h2,h3,h4,h5{ margin:0 0 var(--space-4); line-height:1.25; }
h1{ font-size:2rem; text-align:center; }
h2{ font-size:1.5rem; text-align:center; }
h3{ font-size:1.25rem; text-align:center; }
p{ margin:.5rem 0; line-height:1.6; font-size:1rem; }
a{ color:#0077cc; text-decoration:none; }
a:hover{ text-decoration:underline; cursor:pointer; }

/* Media */
img{
  display:block;
  max-width:100%;
  height:auto;
  border-radius: var(--radius);
  background-repeat:no-repeat;
  background-size:cover;
}

/* Containers & Utilities */
.container{ max-width:var(--container); margin:0 auto; padding:0 var(--space-4); }
.center{ text-align:center; }
.hidden{ display:none !important; }

/* ---------- Header / Navigation ---------- */
/* Outer shell */
#navbar1{
  background: var(--hero);
  width:100%;
}
#navbar1 .nav-inner{
  max-width: var(--container);
  width:100%;
  margin:0 auto;
  padding:12px 28px;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:22px; /* safe in modern browsers */
}
#navbar1 .logo img{ width:4rem; height:auto; display:block; }

/* Nav links */
#navbar1 a{
  color:#fff;
  text-decoration:none;
  font-weight:600;
  white-space:nowrap;
}
#navbar1 a:hover{ text-decoration:underline; }

/* Dropdown (kept minimal for now) */
#navbar1 .dropdownField{ position:relative; display:inline-flex; align-items:center; }
#navbar1 .dropdown{
  position:absolute; top:100%; left:0;
  background: var(--hero);
  display:none;
  min-width:200px;
  box-shadow: 3px 3px 12px rgba(0,0,0,.6);
  z-index:999;
}
#navbar1 .dropdown a{ display:block; padding:.75rem 1rem; font-weight:500; }
#navbar1 .dropdownField:hover .dropdown{ display:block; }

/* CTA link on the right */
#navbar1 .contactBTN{
  margin-left:auto;
  padding:.55rem 1rem;
  border:1px solid rgba(255,255,255,.25);
  border-radius:8px;
}

/* Responsive header */
@media (max-width:980px){
  #navbar1 .nav-inner{ flex-wrap:wrap; }
  #navbar1 .contactBTN{ margin-left:0; margin-top:8px; }
}

/* ---------- Buttons ---------- */
.btn{
  background: var(--brand);
  color:#fff;
  font-weight:700;
  padding:.85rem 1.35rem;
  border-radius:8px;
  display:inline-block;
  box-shadow:0 4px 14px rgba(139,0,0,.20);
  border:0;
}
.btn:hover{ text-decoration:none; filter:brightness(1.03); }
.btn.ghost{
  background:transparent;
  color:#fff;
  border:1px solid var(--ring);
  box-shadow:none;
}

/* Generic button element fallback */
button{
  border: none;
  color: #fff;
  background: var(--brand);
  font-size: 1rem;
  border-radius: 6px;
  padding:.8rem 1.2rem;
}
button:hover{ filter:brightness(1.03); cursor:pointer; }
button:disabled{ background:#4C4E52; color:#808080; cursor:not-allowed; }

/* ---------- Hero Sections ---------- */
.hero{
  position:relative;
  color:#fff;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(104,211,255,.18), transparent 60%),
    var(--hero);
  clip-path: polygon(0 0,100% 0,100% 88%,0 100%);
  padding:3rem 0 4.25rem;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 1px) 0 0/18px 18px;
  opacity:.22; pointer-events:none;
}
.hero h1{ font-size:2.25rem; line-height:1.15; margin:0 0 .6rem; }
.hero p{ max-width:640px; margin:0 auto 1.1rem; color:#e9eef3; }

/* A flat hero variant (no slant) for pages where cards sit beneath */
.hero-flat{
  background: var(--hero);
  color:#fff;
  padding:3rem 1rem;
  clip-path:none;
}

/* ---------- Cards, Tiles, Grids ---------- */
.card{
  background:var(--card);
  border-radius: var(--radius-lg);
  padding:1.05rem;
  box-shadow: var(--shadow-md);
  transition: transform .18s ease, box-shadow .18s ease;
  text-align:left;
}
.card:hover{ transform:translateY(-3px); box-shadow: var(--shadow-lg); }
.card img{ border-radius: var(--radius); margin-bottom:.7rem; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.card h2{ margin:.2rem 0 .2rem; font-size:1.15rem; }
.card p{ margin:0 0 .4rem; font-size:.95rem; color:#333; }
.mini{ font-size:.85rem; color: var(--muted); }

.pillars{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.2rem; }

.tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; }
.tile{
  background:#fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding:1rem;
}

.section-grid{
  max-width:1100px; margin:2.5rem auto; padding:0 1rem;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:2rem; align-items:center;
}
.section-grid img{ box-shadow: var(--shadow-sm); }

/* Process steps */
.process{ background:#F6F7F9; padding:1.7rem 0; }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; }
.step{
  background:#fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding:.9rem;
  text-align:center;
}
.step svg{ width:22px; height:22px; margin-bottom:.4rem; }
.step b{ display:block; margin-bottom:.15rem; }

/* Responsive grids */
@media(max-width:900px){
  .steps{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:520px){
  .steps{ grid-template-columns:1fr; }
}

/* Alternating rows (About, Services sections) */
.alt-rows{ max-width:1100px; margin:3rem auto; padding:0 1rem; }
.program-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.5rem; align-items:center; margin-bottom:2.5rem;
}
.program-row img{ box-shadow: var(--shadow-sm); }
@media(min-width:768px){
  .program-row:nth-of-type(even){ direction:rtl; }
  .program-row:nth-of-type(even) > *{ direction:ltr; }
}

/* ---------- Badges, Chips, CTA strip ---------- */
.badges{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; align-items:center; }
.badges img{ height:40px; filter:grayscale(10%); opacity:.95; }

.chips{ display:flex; flex-wrap:wrap; justify-content:center; }
.chip{ background:#eee; border-radius:999px; padding:.35rem .8rem; font-size:.9rem; margin:.25rem; }

.cta-bar{
  display:flex; gap:1rem; justify-content:center; align-items:center;
  background:#fff; padding:1.5rem;
}

/* ---------- Forms (Contact) ---------- */
form label{ display:block; font-weight:600; font-size:.9rem; margin:.5rem 0 .25rem; }
form input, form textarea, form select{
  width:100%; padding:.6rem; border:1px solid #ccc; border-radius:6px; font-size:.95rem; font-family:inherit;
}
form textarea{ resize:vertical; min-height:120px; }
.submit-btn{
  background:var(--brand); color:#fff; border:none;
  padding:.9rem 2rem; border-radius:6px; font-size:1rem; cursor:pointer;
  width:100%; max-width:260px; margin:1rem auto 0; display:block;
}

/* File input polish + fix cut-off */
input[type="file"]{
  width:100%;
  box-sizing:border-box;
  border:1px dashed #c9c9c9;
  background:#fafafa;
  padding:.5rem;
  border-radius:6px;
  font:inherit;
}
input[type="file"]::file-selector-button{
  margin-right:.75rem;
  padding:.45rem .8rem;
  border:1px solid #ccc;
  border-radius:4px;
  background:#fff;
  color:#333;
  font:inherit;
  cursor:pointer;
}
input[type="file"]:hover::file-selector-button{ background:#f3f3f3; }

/* Contact card wrapper (used on Contact.html) */
.contact-wrap{
  max-width:840px; margin:2.5rem auto;
  display:grid; grid-template-columns:260px 1fr; gap:2rem;
}
.contact-card{
  background:#fff; padding:2rem; border-radius:8px; box-shadow: var(--shadow-sm);
}

/* Hero content always above background overlays */
.hero, [style*="linear-gradient"][style*="url("] { position: relative; }
.hero * { position: relative; z-index: 1; }


@media(max-width:700px){
  .contact-wrap{ grid-template-columns:1fr; }
  .contact-card{ padding:1.5rem; }
}

/* ---------- Footer ---------- */
footer{
  background: var(--brand);
  color:#fff;
  width:100%;
  text-align:center;
  padding:1rem 0;
}
footer a{ color:#fff; text-decoration:none; }
footer a:hover{ text-decoration:underline; }

/* ---------- Legacy elements kept for compatibility ---------- */
/* Old slideshow blocks (safe to keep dormant) */
.slideshow{ position:relative; height:400px; display:none; }
.slide{
  transition: all .7s ease-in-out;
  position:absolute; top:0; left:0; height:100%; object-fit:cover;
}
/* Old footer class (re-route to current footer look) */
.footer{
  background: var(--brand); color:#fff; width:100%; text-align:center; padding-top:.5rem;
}
/* Old article layout (ensures older pages still readable) */
article{ max-width:1100px; margin:0 auto; padding:0 1rem; }

/* ---------- Small helpers for pages with slanted hero above cards ---------- */
/* Add top padding to the first section after a slanted hero if content looks tight */
.section-after-hero{ padding-top: 2rem; }