/* ===============================
   NAVIGATION BAR
   =============================== */
.navbar {
  position: fixed;               /* Fixes the navbar to the top of the screen */
  top: 0;                        /* Anchors it at the very top */
  width: 100%;                   /* Stretches across full width */
  z-index: 1000;                 /* Keeps it above other elements */
  background-color: #255cb9f6;    /* Semi-opaque blue background */
  display: flex;                 /* Flexbox for layout */
  justify-content: space-between;/* Space out logo (left) and nav-links (right) */
  align-items: center;           /* Vertically centers items */
  padding: 1rem 2rem;            /* Inner spacing around content */
}

.nav-links {
  display: flex;                 /* Display nav items in a row */
  list-style: none;              /* Remove bullets */
  gap: 1.5rem;                   /* Space between each nav item */
  margin: 0;                     /* Reset default margins */
}

.nav-links a {
  color: white;                  /* White text */
  text-decoration: none;         /* Remove underline */
  font-weight: 500;              /* Slightly bold */
}

.nav-links a:hover {
  color: #5babb6ff;              /* Teal hover color */
}

/* ===============================
   GLOBAL PAGE STYLES
   =============================== */
body {
  padding-top: 100px;            /* Pushes content down so navbar doesn’t overlap */
  margin: 0;                     /* Remove default body margin */
  font-size: 16px;               /* Set base font size */
}

.logo img {
  height: 70px;                  /* Fixed logo height */
}

/* ===============================
   LEGACY GOVERNANCE CARD STYLE
   =============================== */
.ai-governance-card {
  max-width: 900px;              /* Limit width for readability */
  background: #fff;              /* White card background */
  border-radius: 30px;           /* Large rounded corners */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Soft shadow */
  padding: 2rem;                 /* Inner spacing */
  text-align: left;              /* Align text left */
  line-height: 1.6;              /* Comfortable text spacing */
}

.ai-governance-card h2, 
.ai-governance-card h3 {
  color: #255cb9;                /* Blue headings */
  margin-top: 1.5rem;            /* Top spacing */
}

.ai-governance-card p {
  margin-bottom: 1rem;           /* Bottom spacing */
}

/* ===============================
   BACK LINK STYLING
   =============================== */
.back-link {
  background: rgba(255, 255, 255, 0.9); /* White background (slightly transparent) */
  padding: 6px 12px;                    /* Padding around link */
  border-radius: 20px;                  /* Pill-shaped button */
  display: inline-flex;                 /* Flex to align icon + text */
  align-items: center;                  /* Vertically center content */
  gap: 8px;                             /* Space between icon and text */
  text-decoration: none;                /* Remove underline */
  font-weight: bold;                    /* Bold text */
  color: #3425b9ff;                     /* Blue text */
}

.back-link svg {
  width: 22px;                          /* Icon size */
  height: 22px;
  fill: #255cb9;                        /* Icon fill color */
}

.back-link:hover {
  background: rgba(91, 171, 182, 0.9);  /* Teal hover background */
  color: white;                         /* White text on hover */
}

.back-link:hover svg {
  fill: white;                          /* Icon turns white on hover */
}

/* ===============================
   BUTTON LINK
   =============================== */
.btn-link {
  display: inline-block;
  margin-top: 0.8rem;
  padding: 0.6rem 1.2rem;
  background-color: #2563eb;   /* blue background */
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.btn-link,
.btn-link:link,
.btn-link:visited {
  color: #fff !important;      /* ✅ force white text */
  text-decoration: none !important; /* remove underline */
  font-weight: 500;
  font-size: 0.775rem;
}

.btn-link:hover {
  background-color: #010513;   /* darker blue on hover */
  color: #fff !important;      /* stay white */
}
/* ===============================
   API GOVERNANCE CARD COMPONENT
   (Reusable, compact version)
   =============================== */
.api-governance-card {
  max-width: 92ch;                      /* Keeps text line length readable */
  margin: 0 auto;                       /* Center horizontally */
  padding: 1.5rem 2rem;                 /* Card padding */
  background: rgba(255,255,255,0.9);    /* White w/ slight transparency */
  border-radius: 8px;                   /* Soft rounded corners */
  box-shadow: 0 2px 6px rgba(216, 213, 213, 0.08); /* Subtle shadow */
}

/* Headings inside the card */
.api-governance-card h2 {
  margin: 0 0 1rem;                     /* Space below */
  font-size: 1.6rem;                    /* Larger font */
  font-weight: 700;                     /* Bold */
}

.api-governance-card h3 {
  margin: 0.95rem 0 0.25rem;            /* Tight spacing around headings */
  font-size: 1.2rem;                    /* Slightly smaller than h2 */
  line-height: 1.3;                     /* Compact line height */
  display: flex;                        /* Align icon + text horizontally */
  align-items: center;
}

/* Paragraphs inside the card */
.api-governance-card p {
  margin: 0 0 0.75rem;                  /* Small bottom margin */
  line-height: 1.6;                     /* Comfortable text spacing */
  font-size: 18px;
  color: #333;                          /* Dark gray text */
}

/* Lists inside the card */
.api-governance-card ul {
  margin: 0.25rem 0 0.75rem 1.25rem;    /* Compact spacing + left indent */
  padding: 0;
}

.api-governance-card li {
  margin: 0.2rem 0;                     /* Small space between list items */
  line-height: 1.5;
}

/* Links inside card */
.api-governance-card a {
  color: #2563eb;                       /* Blue link */
  text-decoration: underline;
  text-underline-offset: 2px;
}

.api-governance-card a:hover {
  color: #1e40af;                       /* Darker blue on hover */
}
/* ===============================
   GLOBAL PARAGRAPH CONTROL
   =============================== */
p {
  margin: 0 0 1rem;       /* consistent bottom spacing */
  line-height: 1.6;       /* readable line height */
  font-size: 16px;        /* base font size */
  color: #333;            /* dark gray text */
}

/* Make first paragraph in a section/card stand out */
p:first-of-type {
  margin-top: 0.5rem;     /* reduce top spacing */
  font-size: 18px;     /* slightly larger */
  color: #444;            /* lighter emphasis */
}