/* Color Minutes - shared top banner (used by includes/cm-site-banner.php)
   Edit this file once and every page that uses the banner changes.
   Class names are prefixed cmb- so they cannot collide with page styles. */

.cmb-bar{
  position:sticky;
  top:0;
  z-index:60;
  background:#ffffff;
  border-bottom:1px solid #dfe7ef;
  box-shadow:0 2px 10px rgba(24,49,83,.05);
}
.cmb-inner{
  width:min(1160px, calc(100% - 32px));
  margin:auto;
  min-height:60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  padding:8px 0;
}
.cmb-brand{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  gap:10px;
  text-decoration:none;
  color:#183153;
  font:800 1.12rem/1.1 Arial,Helvetica,sans-serif;
  white-space:nowrap;
}
.cmb-brand img{
  width:34px;
  height:34px;
  display:block;
  flex:0 0 auto;
}
.cmb-brand b{color:#2777d8;font-weight:800}
.cmb-brand:focus-visible,.cmb-nav a:focus-visible{outline:3px solid #2777d8;outline-offset:3px;border-radius:8px}

.cmb-nav{
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:wrap;
  font-family:Arial,Helvetica,sans-serif;
}
.cmb-nav a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:8px 11px;
  border-radius:11px;
  text-decoration:none;
  color:#31465f;
  font-size:.9rem;
  font-weight:700;
}
.cmb-nav a:hover{background:#eaf4ff;color:#183153}
.cmb-nav a[aria-current="page"]{background:#eaf4ff;color:#183153;box-shadow:inset 0 0 0 1px #bcdcff}
.cmb-nav a.cmb-cta{
  background:#2777d8;
  color:#fff;
  box-shadow:0 8px 18px rgba(39,119,216,.25);
}
.cmb-nav a.cmb-cta:hover{background:#1f66bd;color:#fff}
.cmb-nav a.cmb-login{border:1px solid #dfe7ef}

/* Wide picture band: the picture set in includes/cm-site-banner.php.
   Full width, never a logo and never text on top of it.

   Computer and tablet: the WHOLE picture is shown, nothing cut, and the band
   is never taller than --cmb-hero-h.
   Phone: the band has a fixed height and the MIDDLE of the picture is used,
   so the wording in the middle of the banner stays large and readable
   instead of shrinking to nothing. The picture is centred, so the same
   amount is trimmed from the left and from the right.

   ONE NUMBER PER SCREEN SIZE, nothing else to change. */
.cmb-hero{
  --cmb-hero-h:380px;          /* computer: tallest the band may get */
  display:block;
  background:#183153;
  line-height:0;
  /* a page may give plain sections padding; the picture band needs none */
  margin:0;
  padding:0;
}
.cmb-hero img{
  display:block;
  width:100%;
  height:auto;
  max-height:var(--cmb-hero-h);
  object-fit:cover;
  object-position:center center;   /* keeps the middle of the picture */
}
@media (max-width:1100px){ .cmb-hero{--cmb-hero-h:320px} }   /* small laptop */
@media (max-width:860px){  .cmb-hero{--cmb-hero-h:260px} }   /* tablet */
@media (max-width:520px){                                    /* phone */
  .cmb-hero img{
    /* fixed height so the wording stays readable, but never so tall that a
       very narrow phone would trim into the wording */
    height:min(120px, 33vw);
    max-height:none;
  }
}

@media (max-width:860px){  .cmb-hero{--cmb-hero-h:260px} }   /* tablet */
@media (max-width:520px){  .cmb-hero{--cmb-hero-h:200px} }   /* phone */

@media (max-width:860px){  .cmb-hero{--cmb-hero-h:240px} }   /* tablet */
@media (max-width:520px){  .cmb-hero{--cmb-hero-h:170px} }   /* phone */

@media (max-width:860px){
  .cmb-inner{min-height:56px}
  .cmb-nav a{padding:8px 9px;font-size:.85rem}
}
@media (max-width:640px){
  .cmb-inner{gap:8px;padding:8px 0 10px}
  .cmb-brand{font-size:1.02rem}
  .cmb-brand img{width:30px;height:30px}
  .cmb-nav{width:100%;gap:6px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:2px}
  .cmb-nav::-webkit-scrollbar{display:none}
  .cmb-nav a{white-space:nowrap;font-size:.83rem;padding:8px 10px}
}