:root {
  --clr-primary: #651fff;
  --clr-grey: #37474f;
  --clr-grey-light: #b0bec5;
}

body {
  font-family: 'Public Sans';
}
/* Global link reset */
a,
a:visited,
a:hover,
a:focus,
a:active {
  text-decoration: none;
  color: inherit;   /* inherit parent text color */
}

* {
  padding: 0;
  margin: 0;
}

/* ================== MOBILE FIRST ================== */
.wrapper-grid {
  display: grid;
  margin: 0;
  grid-template-columns: 1fr; /* stack by default */
  justify-content: center;
  align-items: start;
  position: relative; 
  z-index: 1; 
}

.portal-grid {

display: grid;
  margin: 0;
  grid-template-columns: 1fr; /* stack by default */
  justify-content: center;
  align-items: start;

}

.crtacnt-container {
  text-align: center;
  position: relative;
  margin-top: 0;
  box-shadow: 0 2px 8px 0 var(--clr-grey-light);
  border-radius: 1em;
  overflow: visible;
  background: url(/images/nurseBkgrnd.png) center/cover no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  padding: 2rem;
  z-index: 1;
}

.crtacnt-container .info-content {
  flex: 1;
  min-width: 0; /* prevents flexbox squish */
  width: 80%;
  z-index: 1;
}

.audit-container {
  display: block;
  margin: auto;
  text-align: center;
  width: 100%;
  z-index: 1;
}

.section {
  font-size: 10px;
  width: 100%;
  margin: 0 auto;
}

.auditSum {
  font-size: 10px;
  text-align: center;
}

/* ===== site license (mobile) ===== */
.license-grid {
  margin: 0 1rem 1rem;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  background: url(/images/nurseBkgrnd.png) center/cover no-repeat;
}

.license-container {
  text-align: center;
  position: relative;
  box-shadow: 0 2px 8px 0 var(--clr-grey-light);
  border-radius: 1em;
  z-index: 1;
  
}

.col-grid {
  margin: 2.9rem 1rem 1rem;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}

/* utility links */
a.imgList {
  color: #808080;
}

/* inputs */
.company { width: 80%; }
.data-in { margin: .4rem; border-radius: .3rem; }
.oops { color: red; margin: .5rem; }

form { border-radius: 1em; }

.cpasswd { width: 100%; color: #808080; }

/* tables */
.cpuiTable, .IV-UGPIVReg, .accntTable, .crseTable, .cpuiReg {
  
  width: 100%;
}

.theader { text-align: left; font-size: .7rem; }
.regCell { text-align: left; font-size: .8rem; }

.className { color: #808080; font-size: .8rem; }
.print-cert { font-size: .6rem; line-height: .4rem; }

.crseTable .className {
  text-align: left;
}
.accnt-btn {
  width: 60%;
  border: none;
  font-size: 1rem;
  font-weight: bold;
  color: white;
  background: #5fc5c2;
  padding: 1rem;
  margin-top: .2rem;
  font-family: 'Public Sans';
}

/* ===== shopping cart (mobile) ===== */
.cart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 5rem;
}

.cart-description {
  font-size: .8rem;
  margin: 2rem;
  color: #808080;
  text-align: left;
}

.shopping-cart { padding: 0 0 0 1rem; }

.cartItem1, .cartItem2, .cartItem3, .cartItem4, .cartItem5 {
  grid-column: span 2;
  text-align: center;
}
/* Prevent iOS auto-text zoom from skewing sizes */
html { -webkit-text-size-adjust: 100%; }

.btn,
a.btn,
button.btn {
  display: block;        /* instead of inline-block */
  width: 100%;            /* or 100% if you want edge-to-edge */
  max-width: 800px;
  margin: 0.5rem auto;   /* centers them */
  text-align: center;
  color: white !important;
  font-size: 16px;
  font-weight: bold;
  border: #2A98A4 1px solid;
  border-radius: 1rem;
  background: #2A98A4;
  padding: .9rem;
  font-family: 'Public Sans';
  text-decoration: none;
  box-sizing: border-box;
   -webkit-appearance: none; /* iOS Safari consistency */
  appearance: none;
}

/* ===== footer (mobile) ===== */
.footer-container {
  text-align: left;
  color: black;
  background: #f1f1f2;
  padding: .5rem;
  font-size: 16px;   /* set base font size */
  font-weight: 400;  /* set normal weight */
}

.footerText { color: black; }

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* two columns for Quick & Important Links only */
  grid-template-areas:
    "logo logo"
    "about about"
    "quick important"
    "contact contact"
    "bottom bottom";
  gap: 0.5rem;
  justify-items: start;
  width: 100%;
  font-size: 1rem;
  line-height: 1.3rem;
  background: #f1f1f2;
}

.footerItem     { grid-area: logo; }
.footerItem1    { grid-area: about; }
.footerItem2    { grid-area: quick; }
.footerItem3    { grid-area: important; }
.footerItem4    { grid-area: contact; }
.footerBottom   { grid-area: bottom; }

/* make sure they are left-aligned */
.footerItem, .footerItem1, .footerItem2, .footerItem3, .footerItem4, .footerBottom {
  text-align: left;
}

/* logo special treatment for mobile */
.footerItem img {
  display: block;
  margin: 0 auto 0 0; /* ✅ left align instead of center */
  max-height: 100px;
  max-width: 100%;
  height: auto;
}
.footerTitle {
  font-size: 1rem;     /* adjust as needed */
  font-weight: 700;    /* ✅ makes titles bold */
  margin-bottom: 0.5rem; /* optional: adds spacing below title */
}

/* Desktop already overrides to repeat(5, 1fr) elsewhere */


/* ============================================= DESKTOP OVERRIDES ============================================== */
/* ============================================= DESKTOP OVERRIDES ============================================== */
/* ============================================= DESKTOP OVERRIDES ============================================== */
/* ============================================= DESKTOP OVERRIDES ============================================== */
@media screen and (min-width: 768px) {
  .wrapper-grid {
    grid-template-columns: .25fr 2.5fr .25fr;
  }

.crtacnt-container {
    grid-column: 1 / -1;     /* ✅ spans across ALL grid columns */
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem;
    width: 90%;              /* let it grow beyond center column */
  }

  .crtacnt-container .info-content {
    width: 80%;             /* fill container */
    max-width: 1100px;
    margin: 0 auto;
  }

  .button-row {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 30px;
  }
  .button-row .btn { min-width: 150px; width: 300px; }

  a.btn:hover, .btn:hover {
    background: #217781;
    color: #fff;
  }
/* Small button variant (for compact links like Back, Close, etc.) */
.btn-small {
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.85rem;
  background-color: #e0e0e0;
  color: #000000;
  text-decoration: none;
  border: 1px solid #999;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
}

.btn-small:hover {
  background-color: #cfcfcf;
  transform: translateY(-1px);
}

.btn-small:active {
  background-color: #bdbdbd;
  transform: translateY(0);
}
  .license-grid {
    grid-template-columns: .5fr 2fr .5fr;
  }
  .license-container { grid-column-start: 2; }

  .col-grid {
    grid-template-columns: repeat(8, 1fr);
  }

  h1.title { margin-top: 1rem; font-size: 30px; }

  .theader { font-size: 1rem; }
  .regCell { font-size: 1rem; }

  .accntTable { width: 60%; margin: 0 auto 2%; font-size: 1rem; }
  
  .accntTable td:first-child {
  text-align: right;   /* ✅ right-align the first column */
  padding-right: 1rem; /* optional: add a little spacing */
  font-weight: 600;    /* optional: make labels stand out */
}

.accntTable td:nth-child(2) {
  text-align: left;    /* ✅ left-align the second column */
}


  .centerTable { width: 100%; margin: 0 auto; }

  .print-cert { font-size: .9rem; line-height: .9rem; }

  .cartItem1, .cartItem2, .cartItem3, .cartItem4, .cartItem5 {
    text-align: right;
    margin-right: 3rem;
  }
  .cartItem1-left { margin-left: 3rem; text-align: left; }

 .footer-grid {
    grid-template-columns: repeat(5, 1fr);
    grid-template-areas: none; /* <---- THIS REMOVES THE MOBILE GRID AREAS */
    justify-items: stretch;
    margin: 0 auto;
  }
  .footerItem,
  .footerItem1,
  .footerItem2,
  .footerItem3,
  .footerItem4 {
    grid-column: auto;  /* each takes one column */
    text-align: left;
    margin: 0;          /* reset mobile margins */
  }
  .footerItem {
    text-align: center;   /* ✅ center logo horizontally */
  }

  .footerItem img {
    margin: 0 auto;       /* ✅ center logo inside column */
    display: block;
  }

}