/* ============================================================
   forms-content.css
   Scoped styles for the ICT Forms page — cards & content only.
   All header, banner, footer, nav, and gov-logos styles are
   inherited from the original styles.css.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap");

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --clr-bg: #f4f6f9;
  --clr-surface: #ffffff;
  --clr-border: #e2e8f0;
  --clr-accent: #1a56db;
  --clr-accent-soft: #dbeafe;
  --clr-accent-alt: #f85461;
  --clr-text-head: #0f172a;
  --clr-text-body: #475569;
  --clr-text-muted: #94a3b8;
  --clr-form6-bg: #0f2d6b;
  --clr-form6-hover: #1a3d8c;

  --radius-card: 12px;
  --radius-pill: 999px;
  --shadow-card:
    0 2px 8px rgba(15, 23, 42, 0.07), 0 0 0 1px rgba(15, 23, 42, 0.05);
  --shadow-hover:
    0 8px 24px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(26, 86, 219, 0.18);
  --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);

  --font-display: "Libre Baskerville", Georgia, serif;
  --font-body: "Georgia", sans-serif;
}

/* ── Container wrapper ─────────────────────────────────────── */
.container {
  background-color: var(--clr-bg);
  font-family: var(--font-body);
}

/* ── main-content reset ─────────────────────────────────────── */
.main-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 0 60px;
}

/* ── Page Title ─────────────────────────────────────────────── */
.page-title {
  font-family: var(--font-display) !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--clr-text-muted) !important;
  text-align: center !important;
  width: auto !important;
  padding-bottom: 0 !important;
  margin-bottom: 14px !important;
  border-bottom: none !important;
  position: relative;
}

.page-title::after {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  background: var(--clr-accent-alt);
  margin: 10px auto 0;
  border-radius: var(--radius-pill);
}

/* ── Section heading inside container ──────────────────────── */
.section-label {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--clr-text-head);
  text-align: center;
  margin-bottom: 48px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ── Cards wrapper (4-up grid) ──────────────────────────────── */
.cards-section {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  padding: 0 80px !important;
  margin: 0 0 8px !important;
  width: 100%;
  max-width: 1400px;
  box-sizing: border-box;
}

/* ── Individual form card ───────────────────────────────────── */
.card-forms {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  height: 300px !important;
  padding: 44px 32px !important;
  background-color: var(--clr-surface) !important;
  border-radius: var(--radius-card) !important;
  border: 1px solid var(--clr-border) !important;
  border-bottom: 3px solid var(--clr-accent) !important;
  box-shadow: var(--shadow-card) !important;
  cursor: pointer;
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition) !important;
  overflow: hidden;
}

/* subtle top stripe on hover */
.card-forms::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--clr-accent), #60a5fa);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  opacity: 0;
  transition: opacity var(--transition);
}

.card-forms:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-hover) !important;
  border-color: rgba(26, 86, 219, 0.25) !important;
}

.card-forms:hover::before {
  opacity: 1;
}

/* Icon */
.card-forms > i {
  font-size: 2.8rem !important;
  color: var(--clr-accent) !important;
  background-color: var(--clr-accent-soft) !important;
  border-radius: 50% !important;
  width: 82px;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
  flex-shrink: 0;
  transition:
    background-color var(--transition),
    color var(--transition);
}

.card-forms:hover > i {
  background-color: var(--clr-accent);
  color: #fff;
}

/* Card label */
.card-forms > h2 {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--clr-text-head) !important;
  margin-top: 20px !important;
  margin-bottom: 0 !important;
  line-height: 1.45 !important;
  letter-spacing: 0.01em !important;
}

/* ── Divider between card rows ──────────────────────────────── */
.hr-forms {
  width: 56px !important;
  border: none !important;
  border-top: 2px solid var(--clr-border) !important;
  margin: 36px auto !important;
}

/* ── Second cards row ────────────────────────────────────────── */
.cards-section-2 {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  padding: 0 30px !important;
  margin: 0 !important;
  width: 100%;
  max-width: 1300px;
  box-sizing: border-box;
}

/* ── CS Form 6 card (wide) ───────────────────────────────────── */
.card-forms-form6 {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 24px !important;
  width: 560px !important;
  height: auto !important;
  min-height: 110px !important;
  padding: 28px 36px !important;
  background-color: var(--clr-form6-bg) !important;
  border-radius: var(--radius-card) !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(15, 45, 107, 0.25) !important;
  cursor: pointer;
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    background-color var(--transition) !important;
  overflow: hidden;
}

.card-forms-form6::after {
  content: "";
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 50%;
  pointer-events: none;
}

.card-forms-form6:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 28px rgba(15, 45, 107, 0.35) !important;
  background-color: var(--clr-form6-hover) !important;
}

/* Icon */
.card-forms-form6 > i {
  font-size: 2.6rem !important;
  color: rgba(255, 255, 255, 0.55) !important;
  flex-shrink: 0;
  margin-bottom: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  transition: color var(--transition);
}

.card-forms-form6:hover > i {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Label */
.card-forms-form6 > h2 {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  text-align: left !important;
  margin: 0 !important;
  line-height: 1.55 !important;
  letter-spacing: 0.01em !important;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .cards-section {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 0 40px !important;
  }
  .cards-section-2 {
    padding: 0 40px !important;
  }
}

@media (max-width: 640px) {
  .cards-section {
    grid-template-columns: 1fr !important;
    padding: 0 20px !important;
  }
  .cards-section-2 {
    padding: 0 20px !important;
  }
  .card-forms {
    height: auto !important;
    padding: 28px 20px !important;
  }
  .card-forms-form6 {
    width: 100% !important;
  }
}