/* Home Team Construction — utility-bar-red

   ---------- OPTION A — brand red, the existing bar refined ----------

   Ported from deliverables/review.html <template id="cmp-utility-bar-red">.
   Tokens come from tokens.css; only local overrides are declared here.
*/

/* Home Team Construction — 01 Utility Bar / OPTION A, brand red
   Keeps the existing red announcement moment. Tokens are redeclared on the
   section class (not :root) so the block cannot leak variables into Elementor,
   ElementsKit, or the theme.

   Type size is deliberate, not inherited: white on --htc-red measures 4.17:1,
   which clears WCAG AA only as large text. 20px at 600 is 15pt bold, past the
   14pt-bold threshold, so it passes. Dropping to 14px here would fail. */
.htc-utility-bar{
  /* Brand */

  /* Neutrals */

  /* Type */

  /* Spacing */

  /* Layout */

  box-sizing:border-box;
  width:100%;
  background:var(--htc-red);
  border-bottom:1px solid rgba(0,0,0,.14);
  padding:var(--htc-s2) var(--htc-s4);
  font-family:var(--htc-font-body);
}

.htc-utility-bar *,
.htc-utility-bar *::before,
.htc-utility-bar *::after{ box-sizing:border-box; }

.htc-utility-bar__inner{
  max-width:var(--htc-container);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--htc-s2);
}

.htc-utility-bar__mark{
  flex:0 0 auto;
  display:inline-flex;
  color:var(--htc-white);
}
.htc-utility-bar__mark svg{ display:block; }

.htc-utility-bar__text{
  margin:0;
  font-size:var(--htc-h5);
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.005em;
  text-align:center;
  color:var(--htc-white);
}

/* Both clauses stay full white at 600. On this ground a lighter tone or a
   lighter weight would drop under the contrast floor, so the two clauses are
   separated by the rule below rather than by colour. */
.htc-utility-bar__lead,
.htc-utility-bar__detail{
  color:var(--htc-white);
  font-weight:600;
}

.htc-utility-bar__dash{
  color:rgba(255,255,255,.55);
  padding:0 var(--htc-s1);
  font-weight:400;
}

/* Tablet — hold one line, ease the gutters. 1150 is this site's custom
   tablet breakpoint, not an Elementor default. Do not change it. */
@media (max-width:1150px){
  .htc-utility-bar{ padding:var(--htc-s2) var(--htc-s3); }
  .htc-utility-bar__text{ font-size:var(--htc-lead); }
}

/* Mobile — stack the two clauses, drop the connecting dash rather than
   let the line wrap mid-clause. */
@media (max-width:767px){
  .htc-utility-bar{ padding:var(--htc-s2) var(--htc-s3); }
  .htc-utility-bar__inner{
    align-items:flex-start;
    gap:var(--htc-s1);
  }
  .htc-utility-bar__mark{ margin-top:4px; }
  .htc-utility-bar__text{
    display:flex;
    flex-direction:column;
    text-align:left;
    gap:2px;
    font-size:var(--htc-lead);
  }
  .htc-utility-bar__dash{ display:none; }
}