/* Credo self-hosted UI bundle — replaces third-party widgets.
   Section 1: cookie consent banner (replaces WPConsent).
   Colours mirror the previous banner: navy #04194e, gold #ffcd2a. */

:root {
  --credo-navy: #04194e;
  --credo-gold: #ffcd2a;
  --credo-ink: #1a1a1a;
}

/* ---------- cookie consent ---------- */
.credo-cc {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 900000;
  width: min(920px, calc(100vw - 32px));
  background: var(--credo-navy);
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  padding: 20px 22px;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
.credo-cc[hidden] { display: none; }

.credo-cc__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}
.credo-cc__msg { flex: 1 1 320px; margin: 0; }
.credo-cc__msg a { color: var(--credo-gold); }

.credo-cc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.credo-cc__btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  padding: 9px 16px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: #fff;
}
.credo-cc__btn:hover { border-color: rgba(255, 255, 255, 0.6); }
.credo-cc__btn--accept {
  background: var(--credo-gold);
  border-color: var(--credo-gold);
  color: #000;
}
.credo-cc__btn:focus-visible { outline: 3px solid var(--credo-gold); outline-offset: 2px; }

/* reopener — a small fixed pill once a choice has been made */
.credo-cc-reopen {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 899999;
  background: var(--credo-navy);
  color: #fff;
  border: none;
  border-radius: 999px;
  width: 42px;
  height: 42px;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.credo-cc-reopen[hidden] { display: none; }

@media (max-width: 560px) {
  .credo-cc { padding: 16px; bottom: 12px; }
  .credo-cc__actions { width: 100%; }
  .credo-cc__btn { flex: 1 1 auto; text-align: center; }
}

@media (prefers-reduced-motion: no-preference) {
  .credo-cc { animation: credo-cc-in 0.25s ease-out; }
  @keyframes credo-cc-in {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
  }
}

/* ---------- Section 2: forms (replaces WPForms JS behaviour) ---------- */

/* keep the anti-spam honeypot out of sight and off the a11y tree */
.credo-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
}

.credo-form__note {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 8px;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
.credo-form__note--ok {
  background: #e7f6ec;
  border: 1px solid #56b877;
  color: #17492c;
}
.credo-form__note--err {
  background: #fdecec;
  border: 1px solid #e08585;
  color: #7a1a1a;
}

.credo-form .wpforms-field.credo-field-error > label,
.credo-form .credo-field-error > .wpforms-field-label {
  color: #b00020;
}
.credo-form .credo-field-error input:not([type="checkbox"]):not([type="radio"]),
.credo-form .credo-field-error textarea,
.credo-form .credo-field-error select {
  border-color: #b00020;
  outline-color: #b00020;
}

.credo-form.is-submitting button[type="submit"] {
  opacity: 0.6;
  pointer-events: none;
}

/* ---------- Section 3: white app bar ----------
   Force the Hestia navbar to a solid white bar with the navy/silver logo,
   on every page (both the transparent homepage nav and the "not-transparent"
   inner-page nav). */

.navbar.navbar-default,
.navbar.navbar-transparent,
.navbar.navbar-color-on-scroll {
  background-color: #ffffff !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 2px 10px rgba(0, 0, 0, 0.06) !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* logo */
.navbar .navbar-brand {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
.navbar .navbar-brand img {
  height: 52px !important;
  width: auto !important;
  max-width: none !important;
}

/* menu links — navy on white, in both nav states */
.navbar .navbar-nav > li > a,
.navbar.navbar-transparent .navbar-nav > li > a,
.navbar .navbar-nav > li.on-section > a {
  color: #001C71 !important;
  font-weight: 600;
  text-shadow: none !important;
}
.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus,
.navbar.navbar-transparent .navbar-nav > li > a:hover {
  color: #ea2e00 !important; /* keep Hestia's accent for the hover cue */
}

/* mobile hamburger + collapsed menu panel */
.navbar .navbar-toggle .icon-bar {
  background-color: #001C71 !important;
}
@media (max-width: 991px) {
  .navbar .navbar-collapse {
    background-color: #ffffff !important;
  }
}

/* On the homepage the bar overlays the top of the hero carousel, exactly as the
   old transparent nav did — no layout shift, just an opaque white strip. Nudge
   the hero's centred content down a touch so nothing hides behind the bar. */
#carousel-hestia-generic .page-header .container {
  padding-top: 64px;
}

/* ---------- Section 4: brand typography ----------
   Headers  -> Impact (Anton is the self-hosted free stand-in — see fonts/roboto.css)
   Subheads -> Copperplate Gothic Bold (Cinzel is the self-hosted stand-in)
   Real system fonts are tried first; the web fonts only load where they're absent. */

:root {
  --credo-headline: Impact, Haettenschweiler, "Franklin Gothic Bold",
                    "Arial Narrow Bold", "Anton", "Oswald", sans-serif;
  --credo-subhead:  "Copperplate Gothic Bold", "Copperplate", "Cinzel",
                    "Trajan Pro", "Times New Roman", serif;
}

/* headers */
h1, h2,
.hestia-title, h1.hestia-title, h2.hestia-title,
.carousel h2.title, .carousel .hestia-title,
.page-header .title, .title-in-content,
.hestia-about h2 {
  font-family: var(--credo-headline) !important;
  font-weight: 400 !important;      /* Impact has one weight — stop faux-bold */
  letter-spacing: 0.01em;
  line-height: 1.1;
}

/* subheaders — Copperplate/Cinzel runs large, so scale it down (fluid, so
   the theme's own mobile sizes aren't overridden into something too big) */
h3, h4, h5, h6,
.info-title, .card-title, .hestia-work .card-title,
span.sub-title, h5.description, .subscribe-description {
  font-family: var(--credo-subhead) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  line-height: 1.3;
}
h3, .single-post-wrap h3 {
  font-size: clamp(1.125rem, 1rem + 0.7vw, 1.375rem) !important;   /* ~18–22px */
}
h4, .single-post-wrap h4, .card-title,
.blog .card-blog .card-title, .hestia-work .card-title {
  font-size: clamp(1rem, 0.94rem + 0.45vw, 1.185rem) !important;   /* ~16–19px */
}
h5, .single-post-wrap h5, .info-title, h4.card-title {
  font-size: clamp(0.95rem, 0.92rem + 0.25vw, 1.06rem) !important; /* ~15–17px */
}
h6, .single-post-wrap h6,
h5.description, .subscribe-description {
  font-size: 0.9375rem !important;                                 /* 15px */
}
span.sub-title {
  font-size: 1.03rem !important;                                   /* ~16.5px */
}

/* nav + buttons share the headline face */
.navbar .navbar-nav > li > a,
.btn, a.btn, button.btn,
.wpforms-submit, .credo-form button[type="submit"] {
  font-family: var(--credo-headline) !important;
  font-weight: 400 !important;
  letter-spacing: 0.05em;
}
/* Impact/Anton run narrow — give the menu items a little more room */
.navbar .navbar-nav > li > a { font-size: 15px; }

/* ---------- Section 5: author byline — visually hidden, not removed ----------
   "By Credo Software, <date>" (.posted-by) and "Published by … on <date>"
   (h4.author) are taken out of view with the visually-hidden technique
   rather than display:none, so the text, its vcard microformat and
   <time datetime> stay in the accessibility tree and count as real
   content for crawlers / E-E-A-T. */
.posted-by,
h4.author {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- Section 5b: author-card avatar = Credo symbol badge ----------
   The gravatar was a broken "mystery man"; it's now the transparent Credo
   mark, so give the circular .card-avatar a white disc + a little breathing
   room. */
.card-avatar img {
  background: #fff;
  object-fit: contain;
  padding: 8px;
}

/* ---------- Section 6: Core Solutions page — no italics ---------- */
body.postid-4153 em,
body.postid-4153 i,
body.postid-4153 cite {
  font-style: normal;
}