/* =========================================================
   Gasco UAE — static site stylesheet
   NOTE: This is a best-effort structural/visual reconstruction.
   It was built from the live page CONTENT (text, headings, nav,
   image references) but NOT from the site's actual CSS file,
   which this environment could not access. Once you mirror the
   real assets (see README.md), compare against the live site and
   adjust colors/spacing/fonts here to match exactly.
   ========================================================= */

:root {
  --color-primary: #0b3c74;      /* deep industrial blue */
  --color-primary-dark: #072a52;
  --color-accent: #e2691b;       /* safety orange */
  --color-text: #333333;
  --color-text-light: #6b7280;
  --color-bg: #ffffff;
  --color-bg-alt: #f5f7fa;
  --color-border: #e5e7eb;
  --container-width: 1200px;
  --font-body: "Segoe UI", Arial, Helvetica, sans-serif;
  --font-heading: "Segoe UI", Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.65;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-accent); }

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

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-primary-dark);
  line-height: 1.25;
  margin: 0 0 16px;
}

h1 { font-size: 2.1rem; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }

p { margin: 0 0 16px; }

ul.plain { list-style: none; margin: 0; padding: 0; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-primary);
  color: #fff;
  padding: 10px 16px;
  z-index: 1000;
}
.skip-link:focus { left: 10px; top: 10px; }

/* ---------------- Top bar ---------------- */
.top-bar {
  background: var(--color-primary-dark);
  color: #dce6f2;
  font-size: 0.85rem;
}
.top-bar .container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  padding-bottom: 8px;
}
.top-bar a { color: #dce6f2; }
.top-bar a:hover { color: #fff; }
.top-bar-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}
.top-bar .social-links { display: flex; gap: 10px; }
.top-bar .social-links a {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.4);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.top-bar .social-links a:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.top-bar .social-links svg {
  width: 16px; height: 16px;
  fill: #dce6f2;
  display: block;
}
.top-bar .social-links a:hover svg { fill: #fff; }

/* Hide the top bar entirely on mobile — same breakpoint as the nav
   collapse, so "mobile" is defined consistently across the site */
@media (max-width: 860px) {
  .top-bar { display: none; }
}

/* ---------------- Header / nav ---------------- */
.site-header {
  border-bottom: 1px solid var(--color-border);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}
.site-logo img { max-height: 64px; width: auto; }

.main-nav ul {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav a {
  color: var(--color-primary-dark);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.menu-toggle {
  display: none;
  background: none;
  border: 2px solid var(--color-primary);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 1.1rem;
  cursor: pointer;
}

@media (max-width: 860px) {
  .menu-toggle { display: block; }
  .main-nav {
    display: none;
    width: 100%;
    border-top: 1px solid var(--color-border);
  }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav a { display: block; padding: 12px 4px; border-bottom: 1px solid var(--color-border); }
  .site-header .container { flex-wrap: wrap; }
}

/* ---------------- Hero slider ---------------- */
.hero-slider {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.hero-slider .slide {
  display: none;
  position: relative;
}
.hero-slider .slide.is-active { display: block; }
.hero-slider .slide img {
  width: 100%;
  height: clamp(240px, 42vw, 560px);
  object-fit: cover;
}
.hero-slider .slide-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(7,42,82,0.85), rgba(7,42,82,0));
  color: #fff;
  padding: 40px 5% 28px;
  font-size: clamp(1.1rem, 3vw, 1.9rem);
  font-weight: 700;
}
.hero-slider .slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(11,60,116,0.55);
  color: #fff;
  border: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  z-index: 5;
}
.hero-slider .slider-nav:hover { background: var(--color-accent); }
.hero-slider .prev { left: 14px; }
.hero-slider .next { right: 14px; }
.hero-slider .slider-dots {
  position: absolute;
  bottom: 12px; right: 20px;
  display: flex; gap: 8px;
}
.hero-slider .slider-dots button {
  width: 10px; height: 10px; border-radius: 50%;
  border: none; background: rgba(255,255,255,0.55); cursor: pointer; padding: 0;
}
.hero-slider .slider-dots button.is-active { background: var(--color-accent); }

/* ---------------- Sections ---------------- */
.section { padding: 56px 0; }
.section.alt { background: var(--color-bg-alt); }
.section-heading { text-align: center; max-width: 760px; margin: 0 auto 36px; }

.page-hero {
  background: var(--color-primary-dark);
  color: #fff;
  padding: 46px 0;
}
.page-hero h1 { color: #fff; margin: 0; }

/* Icon feature row (home page 3 boxes) */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
  text-align: center;
}
.feature-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 30px 20px;
}
.feature-card img { margin: 0 auto 16px; }
.feature-card h3 { margin-bottom: 8px; }
.feature-card p { color: var(--color-text-light); margin-bottom: 14px; }

/* Two-column mission/vision, image+text blocks */
.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
  align-items: start;
}

.icon-block { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 28px; }
.icon-block img { flex: 0 0 auto; width: 64px; }

/* Alternating image/text rows (division pages) — image ~28%, text gets the rest */
.media-row {
  display: grid;
  grid-template-columns: 28% 1fr;
  gap: 36px;
  align-items: center;
  margin-bottom: 40px;
}
.media-row img { border-radius: 6px; width: 100%; }
.media-row.reverse { grid-template-columns: 1fr 28%; }
.media-row.reverse .media-row-img { order: 2; }
@media (max-width: 760px) {
  .media-row, .media-row.reverse { grid-template-columns: 1fr; }
  .media-row.reverse .media-row-img { order: 0; }
  .media-row img { max-width: 220px; margin: 0 auto; }
}

/* Reasons to choose (about page) — two per row, roomier, numbered */
.reason-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(300px, 1fr));
  gap: 32px 40px;
}
@media (max-width: 720px) {
  .reason-grid { grid-template-columns: 1fr; }
}
.reason-grid .reason {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 28px 30px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.reason-grid .reason-number {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reason-grid .reason h4 { color: var(--color-primary-dark); margin-bottom: 8px; }
.reason-grid .reason p { margin: 0; color: var(--color-text-light); }

/* Service cards (our-services) */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}
.service-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  display: block;
}
.service-card img { width: 100%; height: 320px; object-fit: cover; }
.service-card .service-card-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(7,42,82,0.9), rgba(7,42,82,0));
  color: #fff; padding: 24px 20px 16px; font-size: 1.25rem; font-weight: 700;
}

/* Accreditation */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
}
.doc-card {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
}
.doc-card .doc-icon { font-size: 2.4rem; margin-bottom: 10px; }
.doc-card a.button { margin-top: 10px; }

/* Offices (contact page) */
.office-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}
.office-card {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
}
.office-card iframe { width: 100%; height: 220px; border: 0; display: block; }
.office-card .office-body { padding: 20px; }
.office-card p { margin: 4px 0; }

/* Buttons */
.button {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  padding: 12px 26px;
  border-radius: 4px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}
.button:hover { background: var(--color-primary); color: #fff; }
.button.outline {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}
.button.outline:hover { background: var(--color-primary); color: #fff; }

/* Forms */
.contact-form, .cv-form {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 28px;
  display: grid;
  gap: 16px;
  max-width: 640px;
}
.contact-form label, .cv-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.9rem;
}
.contact-form input,
.contact-form textarea,
.cv-form input,
.cv-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.95rem;
}
/* Honeypot spam-trap field — invisible to real visitors, hidden from
   screen readers, but bots that auto-fill every field will trip it */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Footer */
.site-footer {
  background: var(--color-primary-dark);
  color: #cdd9e8;
  padding: 20px 0;
  text-align: center;
  font-size: 0.9rem;
}
.site-footer a { color: #fff; text-decoration: underline; }

/* Core activities list */
.core-activities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px 32px;
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
}
.core-activities li {
  padding: 10px 0 10px 28px;
  border-bottom: 1px solid var(--color-border);
  position: relative;
}
.core-activities li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 700;
}