/* THE site header (docs/site-header.md): the slim red brand bar of the tools section, now with the site links and
   the account area, on every property. Served by the main host at /css/ke-header.css; KE Tools, SEO Minion and
   KENews link it absolutely, the blog embeds it. Class prefix ke-hdr so no theme rule reaches it. */
.ke-hdr { position: relative; z-index: 1040; background-color: #a63534;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/></filter><rect width='256' height='256' filter='url(%23n)'/></svg>"),
        linear-gradient(180deg, #b03a39 0%, #a63534 60%, #8e2c2b 100%);
    background-size: 256px 256px, auto; background-blend-mode: overlay, normal; color: #fff;
    font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14px; line-height: 1.3;
    -webkit-font-smoothing: antialiased; box-sizing: border-box; }
.ke-hdr *, .ke-hdr *::before, .ke-hdr *::after { box-sizing: border-box; }
.ke-hdr::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 18%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.18) 82%, transparent 100%); }
.ke-hdr__in { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px 22px; min-height: 62px; padding: 8px 28px; }
.ke-hdr__brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; flex-shrink: 0; }
.ke-hdr__brand:hover, .ke-hdr__brand:focus { color: #fff; text-decoration: none; }
.ke-hdr__brand img { width: 38px; height: 38px; border-radius: 50%; display: block; box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 6px 18px rgba(60,12,12,.32); }
.ke-hdr__name { font-weight: 700; font-size: 20px; line-height: 1; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,.94); white-space: nowrap; }
.ke-hdr__suffix { font-size: 12px; font-weight: 400; opacity: .85; margin-left: 8px; white-space: nowrap; }
.ke-hdr__menu { display: flex; align-items: center; gap: 10px 22px; flex: 1 1 auto; min-width: 0; }
.ke-hdr__nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.ke-hdr__link { display: inline-block; padding: 8px 11px; border-radius: 6px; color: rgba(255,255,255,.9); font-weight: 500; text-decoration: none; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.ke-hdr__link:hover, .ke-hdr__link:focus { color: #fff; background: rgba(255,255,255,.14); text-decoration: none; }
.ke-hdr__link.is-active { color: #fff; box-shadow: inset 0 -2px 0 rgba(255,255,255,.85); border-radius: 6px 6px 0 0; }
.ke-hdr__nav--section { padding-left: 14px; border-left: 1px solid rgba(255,255,255,.3); }
.ke-hdr__link--section { font-weight: 400; opacity: .92; }
.ke-hdr__account { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.ke-hdr__pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 999px; border: 1px solid rgba(255,255,255,.5); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .2px; text-decoration: none; white-space: nowrap; transition: background .15s ease, border-color .15s ease; }
.ke-hdr__pill:hover, .ke-hdr__pill:focus { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.8); color: #fff; text-decoration: none; }
.ke-hdr__pill--solid { background: #fff; border-color: #fff; color: #a63534; }
.ke-hdr__pill--solid:hover, .ke-hdr__pill--solid:focus { background: #fdecec; border-color: #fdecec; color: #8e2c2b; }
.ke-hdr__pill--ghost { background: rgba(255,255,255,.14); }
.ke-hdr__pill--button { background: transparent; cursor: pointer; font-family: inherit; line-height: 1.3; }
.ke-hdr__who { color: rgba(255,255,255,.9); font-size: 13px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ke-hdr__form { display: inline; margin: 0; }
.ke-hdr__signout { background: none; border: 0; padding: 7px 4px; color: rgba(255,255,255,.85); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; }
.ke-hdr__signout:hover, .ke-hdr__signout:focus { color: #fff; text-decoration: underline; }
.ke-hdr__toggle { display: none; margin-left: auto; width: 42px; height: 38px; padding: 8px 9px; border: 1px solid rgba(255,255,255,.4); border-radius: 8px; background: transparent; cursor: pointer; flex-direction: column; justify-content: space-between; }
.ke-hdr__toggle span { display: block; height: 2px; background: #fff; border-radius: 2px; }
@media (max-width: 991.98px) {
    .ke-hdr__in { padding: 8px 16px; }
    .ke-hdr__toggle { display: flex; }
    .ke-hdr__menu { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 2; flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 16px 16px; background: #8e2c2b; border-top: 1px solid rgba(255,255,255,.2); box-shadow: 0 12px 24px rgba(0,0,0,.25); }
    .ke-hdr.is-open .ke-hdr__menu { display: flex; }
    .ke-hdr__nav { flex-direction: column; align-items: stretch; }
    .ke-hdr__link { padding: 10px 8px; border-bottom: 1px solid rgba(255,255,255,.12); border-radius: 0; }
    .ke-hdr__link.is-active { box-shadow: none; border-left: 3px solid #fff; padding-left: 10px; }
    .ke-hdr__nav--section { padding-left: 0; border-left: 0; }
    .ke-hdr__account { margin: 0; justify-content: flex-start; }
    .ke-hdr__who { max-width: 100%; }
}
@media (max-width: 1399.98px) and (min-width: 992px) {
    .ke-hdr__who { display: none; }   /* a signed-in laptop width: the address made the links wrap; it is on the account page (2026-10-12) */
}
@media (max-width: 575.98px) {
    .ke-hdr__name { font-size: 16px; letter-spacing: .6px; }
    .ke-hdr__suffix { display: none; }
    .ke-hdr__brand img { width: 32px; height: 32px; }
}
/* the main site's theme sizes its hero headers for the fixed transparent navigation it used to have (.header 90px,
   .header.section 6rem, every section's container 90px at tablet width and up); with the bar in the flow those
   offsets go, and the wavy divider shapes of the red heroes with them (owner, 2026-10-11) */
body.ke-has-hdr .header { padding-top: 0; }
body.ke-has-hdr .header.page .container { padding-top: 48px; padding-bottom: 48px; }
body.ke-has-hdr .section.header, body.ke-has-hdr .header.section { padding-top: 1.5rem; }
body.ke-has-hdr .section.header [class^=container], body.ke-has-hdr .header.section [class^=container] { padding-top: 0; }
body.ke-has-hdr main > section:first-of-type > [class^=container] { padding-top: 2rem; }
body.ke-has-hdr main > section:first-of-type.pt-8, body.ke-has-hdr main > header.page + section.pt-8 { padding-top: 2rem !important; }   /* the pricing pages' pt-8 offset */
body.ke-has-hdr .divider-shape, body.ke-has-hdr .shape-divider { display: none; }   /* the two wave markups of the theme; the second sits in a sibling of the hero */
body.ke-has-hdr .pattern-dots { display: none; }   /* the theme's dotted shapes covered the headings once the hero lost its offset (owner, 2026-10-12) */
body.ke-has-hdr .header.page.gradient .container { padding-bottom: 48px; }
/* the red hero bands under the bar become plain white heading areas (owner, 2026-10-11): the bar is the only red */
body.ke-has-hdr .header.page.gradient { background: #fff !important; color: #2c3c4c; border-bottom: 1px solid #e3ebf2; }
body.ke-has-hdr .header.page.gradient.color-1, body.ke-has-hdr .header.page.gradient .color-1 { color: #2c3c4c !important; }
body.ke-has-hdr .header.page.gradient h1 { color: #c0504f; }
body.ke-has-hdr .header.page.gradient .btn-outline-1 { color: #c0504f; border-color: #c0504f; }
body.ke-has-hdr .header.page.gradient .btn-outline-1:hover { color: #fff; background: #c0504f; }
body.ke-has-hdr .header.page.gradient .card { border: 1px solid #e3ebf2; }
/* a section's own brand lockup ("Marketing Tools" large, "by Keywords Everywhere" small under it) */
.ke-hdr__brand--section { gap: 10px; }
.ke-hdr__brand--section .ke-hdr__lockup { display: flex; flex-direction: column; line-height: 1; }
.ke-hdr__brand--section .ke-hdr__name { font-size: 19px; letter-spacing: 1px; }
.ke-hdr__by { font-size: 11px; font-weight: 400; opacity: .85; margin-top: 4px; white-space: nowrap; }
