/* =========================================================================
   style.css — site template stylesheet
   Header (white logo bar), main navigation (green bar), breadcrumb and footer.
   Layout classes come from Bootstrap 5; this file only adds the site's own
   spacing, colours and typography on top of it.
   ========================================================================= */

:root {
  /* The single place the site's dark green is defined. */
  --site-green: #003d1d;
  --site-green-text: #1a561a;
}

/* The page grows as tall as its content needs so vertical scrolling works
   normally. Sideways scrolling is blocked on desktop only — see the phone
   rules at the bottom of this file, where it has to stay open so the
   full-size certificate can be reached by scrolling / pinching out. */
html,
body {
  overflow-x: hidden;
}

body {
  font-family: 'Plus Jakarta Sans', 'Inter', Arial, sans-serif;
  background-color: #ffffff;
  color: #212529;
  min-height: 100vh;
  height: auto;
}

/* Bootstrap 4 called this class .sr-only; Bootstrap 5 renamed it to
   .visually-hidden. The page markup still uses .sr-only for the "(current)"
   screen-reader labels, so the old name is re-declared here — without it those
   words would be printed inside the navigation buttons. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Stops the page from scrolling sideways if a wide element overflows. */
.overflow-x-hidden {
  overflow-x: hidden;
}

/* -------------------------------------------------------------------------
   HEADER — the white bar with the logo on the left and social icons right
   ------------------------------------------------------------------------- */

.navbar.fixed-top {
  padding: 0;
}

/* The white strip. */
#myDiv {
  width: 100%;
}

/* The row inside the white strip: logo on the left, socials on the right. */
#myDiv .content {
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* The logo + two lines of text. */
.navbar-brand.toggle {
  display: flex;
  margin-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  text-decoration: none;
}

.navbar-brand.toggle img {
  width: auto;
  height: 60px;
  object-fit: contain;
}

/* Social icons in the top-right corner. */
.header-socials-icons {
  align-items: center;
}

.header-socials-icons img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
}

/* -------------------------------------------------------------------------
   MAIN NAVIGATION — the green bar
   ------------------------------------------------------------------------- */

.second-navbar {
  padding-top: 0;
  padding-bottom: 0;
}

/* Spread the menu items evenly across the full width of the green bar,
   the way they sit in the reference design. */
.second-navbar .navbar-nav {
  width: 100%;
  flex-direction: row;
  align-items: center;
  /* !important is needed because the markup also carries Bootstrap's
     .justify-content-end utility class, which is itself !important. */
  justify-content: space-evenly !important;
  margin: 0;
  padding: 0;
}

.second-navbar .nav-item {
  display: flex;
  align-items: center;
}

.second-navbar .nav-link {
  color: #ffffff;
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 20px;
  padding: 20px 4px;
  white-space: nowrap;
  text-decoration: none;
}

.second-navbar .nav-link:hover,
.second-navbar .nav-link:focus {
  color: #d9e7d9;
}

/* The thin divider images between menu items. */
.second-navbar .nav-item.hide .nav-link {
  padding: 0;
  display: flex;
  align-items: center;
}

.second-navbar .nav-item.hide img {
  height: 26px;
  width: 2px;
  opacity: 0.55;
}

/* -------------------------------------------------------------------------
   BREADCRUMB
   ------------------------------------------------------------------------- */

.breadcrumb {
  background: transparent;
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  margin-bottom: 0;
}

.breadcrumb .breadcrumb-item a {
  text-decoration: none;
  color: #4a4a4a;
}

/* No "/" divider between the breadcrumb items. */
.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: none;
}

/* The current page's name in the breadcrumb is black. */
.breadcrumb .breadcrumb-item:last-child a {
  color: #000000;
}

/* The help line under the certificate breaks into two lines on phones only.
   On desktop the whole sentence fits on one line, so the break is suppressed. */
@media (min-width: 992px) {
  .help-line-break {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------------------- */

.footer {
  color: #ffffff;
}

.footer .navbar-brand {
  text-decoration: none;
}

.footer .navbar-brand img {
  width: 43px;
  height: 50px;
  object-fit: contain;
}

.fltext {
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0;
}

.footer .nav-link {
  padding-left: 10px;
  padding-right: 10px;
  text-decoration: none;
}

.footerFixer {
  flex-wrap: wrap;
  align-items: center;
}

.footerFixer img {
  height: 22px;
  width: 2px;
  opacity: 0.6;
}

/* An empty, zero-height item used only on phones to force the footer links to
   wrap after the first separator. Hidden everywhere else. */
.footer .footer-break {
  display: none;
}

/* The copyright strip holds a Bootstrap .row, which uses negative side
   margins. The 12px padding cancels them out — without it the page is 24px
   wider than the window and can be scrolled sideways. */
.copyright {
  padding: 10px 12px;
  font-size: 14px;
}

.poppins-regular {
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 400;
}

/* -------------------------------------------------------------------------
   SMALL SCREENS
   ------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
  /* Hide the decorative dividers — they look wrong in a stacked menu. */
  .second-navbar .nav-item.hide {
    display: none;
  }

  .second-navbar .navbar-nav {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  /* Phone/tablet menu text: a touch lighter, a touch smaller and set without
     the extra letter-spacing, so the longer items sit inside the same width
     as the brand text in the header. Desktop keeps 15px / 500 / 0.02em. */
  .second-navbar .nav-link {
    padding: 8px 4px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
  }

  /* Phone/tablet header: no social icons — the logo sits on the left and the
     hamburger button on the right (see #myDiv .content further up). */
  .header-socials-icons {
    /* !important is needed because the markup also carries Bootstrap's
       .d-flex utility class, which is itself !important. */
    display: none !important;
  }

  /* Phone/tablet header: a little more room above the logo and brand lines,
     so the gap under the phone's address bar matches the reference. Measured
     off the reference screenshot: the logo starts 26px down instead of 12px,
     and since the header is fixed, everything below it stays exactly where it
     is — only the white header block grows. */
  #myDiv {
    padding-top: 14px;
  }

  /* Phone/tablet header: logo, brand text and hamburger are all a little
     smaller than on desktop. The two brand lines carry their font sizes as
     inline styles in the markup, so !important is needed to override them
     here without touching the desktop sizes. */
  .navbar-brand.toggle img {
    height: 68px;
  }

  .navbar-brand.toggle p:nth-child(1) {
    font-size: 18px !important;
  }

  .navbar-brand.toggle p:nth-child(2) {
    font-size: 15px !important;
  }

  /* The hamburger uses Bootstrap's own default size here, which measured out
     to match the reference. */

  /* The help line under the certificate: sized so that "If you need further
     help ... with" fits on one line, matching the reference's two-line break. */
  .help-line {
    font-size: 11px;
  }

  /* Footer: brand block centred on top, links centred underneath. */
  .footer .rtoc {
    flex-direction: column;
    gap: 14px;
  }

  .footer .footerFixer {
    width: 100%;
    justify-content: center;
  }

  /* Puts "FAQ | Contact Us" on its own line, leaving
     "Authorized Courier Companies |" on the line above. */
  .footer .footer-break {
    display: block;
    flex-basis: 100%;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
  }

  /* The certificate is 523px wide — wider than a phone screen. Sideways
     overflow has to stay open here, otherwise the card would be clipped and
     pinching out would show empty space instead of the rest of the card.
     body carries Bootstrap's .overflow-x-hidden class, hence the !important. */
  html,
  body,
  body.overflow-x-hidden {
    overflow-x: visible !important;
  }
}