/* ==========================================================================
   ARC Services Group - Global Styles
   File: assets/css/style.css
   ========================================================================== */

/* ---- Base ---- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: #333;
  background: #f4f9ff;
  line-height: 1.6;
}

/* Links */
a { color: #0b63b3; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

/* Page wrapper centers content */
.page-wrap {
  padding: 20px;
  min-height: 100vh;                 /* index.css will override to auto */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Card / common container */
.card,
.about-container {
  width: 100%;
  max-width: 1000px;
  background: #fff;
  border: 4px solid #add8e6;         /* light blue */
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* Headings */
h1 { margin: 0 0 16px; color: #004080; font-size: 28px; line-height: 1.25; }
h2 { margin: 12px 0 8px; color: #1f2937; font-size: 22px; }
h3 { margin: 10px 0 8px; color: #1f2937; font-size: 18px; }

/* Generic button (optional) */
.btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  background: #eaf6ff;
  color: #0b304f;
  font-weight: 600;
  border: 0;
  cursor: pointer;
}
.btn:hover, .btn:focus {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  outline: none;
}

/* ==========================================================================
   Global Navigation (used by all pages)
   ========================================================================== */
.site-header {
  background: #eaf6ff;
  border-bottom: 3px solid #add8e6;
}
.nav-wrap {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
}
.brand { font-weight: 700; color: #0b304f; text-decoration: none; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; }
.main-nav li { margin-left: 14px; }
.main-nav a {
  display: block; padding: 8px 12px; border-radius: 8px;
  background: #fff; border: 1px solid #add8e6;
  text-decoration: none; color: #0b304f; font-weight: 600;
}
.main-nav a:hover, .main-nav a:focus { background: #f2fbff; }

/* Responsive nav */
@media (max-width: 760px) {
  .main-nav ul { flex-wrap: wrap; }
  .main-nav li { margin: 8px 8px 0 0; }
}

/* ==========================================================================
   Under Construction (base styles shared; index.css can tweak)
   ========================================================================== */
.uc-container {
  display: flex;
  max-width: 1000px;
  width: 92%;
  background: #fff;
  border: 5px solid #add8e6;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.uc-left, .uc-right { flex: 1; display: flex; }
.uc-left {
  background: #eaf6ff;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.uc-left img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  object-fit: cover;
}
.uc-right {
  padding: 48px;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  text-align: left;
}
.uc-right h1 { margin: 0 0 8px; font-size: 26px; color: #333; }
.uc-right p  { margin: 0; font-size: 18px; color: #666; }

/* ==========================================================================
   About Page (about.php)
   ========================================================================== */
.about-container { max-width: 800px; }
.about-container h1 { text-align: center; }
.about-container p  { font-size: 18px; margin-bottom: 15px; }

/* ==========================================================================
   Competencies (competencies.php) - Card Grid (4 + 3)
   ========================================================================== */
.comp-grid {
  list-style: none;
  padding: 0;
  margin: 18px -12px 0;        /* gutters via negative margins */
  display: flex;
  flex-wrap: wrap;
}
.comp-item { width: 25%; padding: 0 12px 24px; box-sizing: border-box; }
.comp-card {
  height: 100%; background: #ffffff;
  border: 3px solid #add8e6; border-radius: 12px;
  text-align: center; padding: 22px 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.comp-card:hover { box-shadow: 0 10px 24px rgba(0,0,0,.1); transform: translateY(-2px); }
.comp-card img { display: block; margin: 0 auto 14px; max-width: 96px; height: auto; }
.comp-card h3 { margin: 6px 0 8px; font-size: 18px; color: #1f2937; }
.comp-card p  { margin: 0; color: #4b5563; font-size: 15px; line-height: 1.55; }

/* Hover-swap media (optional enhancement) */
.comp-media{ position: relative; height: 140px; margin: 0 0 14px; overflow: hidden; border-radius: 10px; background: #eef6ff; }
.comp-media img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .25s ease; }
.comp-media .icon{ opacity: 1; padding: 16px; }
.comp-media .photo{ opacity: 0; object-fit: cover; }
.comp-card:hover .comp-media .photo,
.comp-card:focus-within .comp-media .photo{ opacity: 1; }
.comp-card:hover .comp-media .icon,
.comp-card:focus-within .comp-media .icon{ opacity: 0; }

/* Responsive */
@media (max-width: 1024px) { .comp-item { width: 33.3333%; } }
@media (max-width: 760px)   { .comp-item { width: 50%; } }
@media (max-width: 480px)   { .comp-item { width: 100%; }
  h1 { font-size: 24px; } h2 { font-size: 20px; }
}

/* Optional micro-motion */
@media (prefers-reduced-motion: no-preference) {
  .card { transition: transform .25s ease, box-shadow .25s ease; }
  .card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.1); }
}